快捷導(dǎo)航

Vue中實現(xiàn)視頻播放的示例詳解

更新時間：2023年08月01日 11:25:33 作者：不會敲代碼阿

這篇文章主要為大家學(xué)習(xí)介紹了基于Vue如何實現(xiàn)視頻播放的功能，文中的示例代碼講解詳細(xì)，具有一定的參考價值，需要的小伙伴可以了解一下

方法一

main.js中引入并且定義全局變量

//Video.js 視頻配件
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
import * as echarts from 'echarts'  //引入Echarts，
Vue.prototype.$echarts = echarts  //定義為全局變量

//通過相對路徑來引入
 <el-row :gutter="30">
      <el-col :span="20" :offset="1">
        <el-card class="box-card">
          <div class="video-player vjs-custom-skin">
            <video id="myVideo" class="video-js" :playsinline="false">
              <source src="../../../assets/images/1.mp4" type="video/mp4" >
            </video>
          </div>
        </el-card>
      </el-col>
    </el-row>
    //絕對路徑引入需要把文件放在public下
 <el-row :gutter="30">
      <el-col :span="20" :offset="1">
        <el-card class="box-card">
          <div class="video-player vjs-custom-skin">
            <video id="myVideo" class="video-js" :playsinline="false">
              <source src="/1.mp4" type="video/mp4" >
            </video>
          </div>
        </el-card>
      </el-col>
    </el-row>
export default {
  name: "TestTwo",
  data() {
    return {
    };
  },
  mounted() {
    this.initVideo();
  },
    methods: {
    initVideo() {
      //初始化視頻方法
      let myPlayer = this.$video(myVideo, {
        //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
        controls: true,
        volume: 0.1,
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        //自動播放屬性,muted:靜音播放
        autoplay: "muted",
        // autoplay: "true",
        //建議瀏覽器是否應(yīng)在<video>加載元素后立即開始下載視頻數(shù)據(jù)。
        preload: "auto",
        //設(shè)置視頻播放器的顯示寬度（以像素為單位）
        width: "500px",
        //設(shè)置視頻播放器的顯示高度（以像素為單位）
        height: "310px",
        language: "zh-CN",
        aspectRatio: "9:6", // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值。值應(yīng)該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如"16:9"或"4:3"）
        fluid: true, // 當(dāng)true時,Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應(yīng)其容器。
      });
    },
  },

方法二

通過自帶的庫來實現(xiàn)

    <el-table v-loading="loading" :data="videoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="視頻" align="center" prop="url">
       <template slot-scope="scope">
         <video  controls id="video-class":src="scope.row.url"></video>
       </template>
       //例如：https:localhost:8080/加你本地配置的路徑
export default {
  name: "TestTwo",
  data() {
    return {
    videoList: []
    };
  },
  methods: {
    /** 查詢視頻播放列表 */
    getList() {
      this.loading = true;
      listVideo(this.queryParams).then(response => {
        this.videoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

到此這篇關(guān)于Vue中實現(xiàn)視頻播放的示例詳解的文章就介紹到這了,更多相關(guān)Vue視頻播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: