vue.js怎么實現視頻播放

這篇文章主要介紹了vue.js怎么實現視頻播放，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue.js實現視頻播放的方法：1、安裝vue-video-player插件；2、在main.js中導入video.js；3、使用vue-video-player插件即可。

本文操作環境：windows10系統、vue 2.5.2、thinkpad t480電腦。

vue中有一個vue-video-player插件，我們可以使用該插件來實現視頻播放。下面就讓我們一起來看看吧！

使用vue-video-player(可以自適應，支持多種格式)

（1）安裝vue-video-player插件

cnpm install --save vue-video-player

（2）在main.js中導入video.js

import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer)
require('vue-video-player/src/custom-theme.css')

（3）使用

<template>
  <div>
    <div v-for="i in 10" :key="i">
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsline="false" :options="playerOptions"></video-player>
      <p>{{'視頻' + i}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Video2',
  data () {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,瀏覽器準備好時開始回放。
        muted: false, // 默認情況下將會消除任何音頻。
        loop: false, // 導致視頻一結束就重新開始。
        preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
        fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
        sources: [{
          type: 'video/mp4', // 這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網址項目
          src: '../../../../static/video1.mp4' // url地址
        }],
        poster: '../../../../static/full_res.jpg', // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器寬度
        notSupportedMessage: '此視頻暫無法播放，請稍后再試', // 允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按鈕
        }
      }
    }
  }
}
</script>

<style scoped >
  .video-js .vjs-icon-placeholder {
    width: 80%;
    height: 80%;
    display: block;
  }
  /* .video-player {
    width: 50%;
  } */
</style>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue.js怎么實現視頻播放”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!