vue中使用video.js插件實現視頻播放

video.js實現視頻播放

在vue中使用video.js實現文件播放。

安裝

yarn add video.js

success Saved 24 new dependencies.
info Direct dependencies
└─ video.js@7.6.5
info All dependencies
├─ @babel/runtime@7.6.2
├─ @videojs/http-streaming@1.10.6
├─ aes-decrypter@3.0.0
├─ dom-walk@0.1.1
├─ for-each@0.3.3
├─ individual@2.0.0
├─ is-function@1.0.1
├─ keycode@2.2.0
├─ m3u8-parser@4.4.0
├─ mpd-parser@0.8.1
├─ mux.js@5.2.1
├─ object-inspect@1.6.0
├─ parse-headers@2.0.2
├─ pkcs7@1.0.2
├─ rust-result@1.0.0
├─ safe-json-parse@4.0.0
├─ string.prototype.trim@1.2.0
├─ string.prototype.trimleft@2.1.0
├─ string.prototype.trimright@2.1.0
├─ url-toolkit@2.1.6
├─ video.js@7.6.5
├─ videojs-font@3.2.0
├─ videojs-vtt.js@0.14.1
└─ xhr@2.4.0
複製代碼

main.js中引入

import Video from "video.js";
import "video.js/dist/video-js.min.css"
Vue.prototype.$video = Video
複製代碼

在VideoPlayer.vue 組件中使用

<template>
  <div class="video_box">
    <video ref="videoPlayer" class="video-js" poster="../../../assets/logo.png">
      <source src="../../../../public/static/video/test1.mp4" type="video/mp4" />
    </video>
  </div>
</template>

<script> export default { name: "VideoPlayer", data() { return { player: null }; }, mounted() { // 播放參數 let options = { controls: true, // 是否顯示底部控制欄 preload: "auto", // 加載<video>標籤後是否加載視頻 autoplay: "muted", // 靜音播放 // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放 width: "640", height: "247", controlBar: { // 自定義按鈕的位置 children: [ { name: "playToggle" }, { name: "progressControl" }, { name: "currentTimeDisplay" }, { name: "timeDivider" }, { name: "durationDisplay" }, { name: "volumePanel", // 音量調整方式橫線條變爲豎線條 inline: false }, { name: "pictureInPictureToggle" //畫中畫播放模式 }, { name: "fullscreenToggle" } ] } }; this.player = this.$video(this.$refs.videoPlayer, options,function onPlayerReady() { console.log('onPlayerReady', this); }); }, beforeDestroy() { if (this.player) { this.player.dispose() } }, methods: { } }; </script>

<style scoped> .video_box { margin: 10px; width: 99%; height: 450px; } .video-js { width: 100%; height: 450px; } </style>


複製代碼

效果