vue-video-player使用筆記（兼容m3u8）

Edison 發布于2019-08-30 15:44 / 2474人閱讀

摘要：默認情況下將會消除任何音頻。瀏覽器選擇最佳行為立即開始加載視頻如果瀏覽器支持將播放器置于流暢模式，并在計算播放器的動態大小時使用該值。換句話說，它將按比例縮放以適應其容器。

下載vue-video-player

 npm install vue-video-player --save

在main.js文件引入

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

在頁面中引入

在頁面中data中配置

  playerOptions: {
        // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, // 如果true,瀏覽器準備好時開始回放。
        muted: false, // 默認情況下將會消除任何音頻。
        loop: false, // 導致視頻一結束就重新開始。
        preload: "auto", // 建議瀏覽器在

掛載視頻組件（非必須）不寫這一步也可以實現播放，添加這個是為了自定義按鈕使用

 computed: {
    player() {
      return this.$refs.videoPlayer.player//自定義播放
    }
  },

官方文檔

video.js:https://docs.videojs.com/docs...
   vue-video-player:https://github.com/surmon-chi...

不需要兼容m3u8的，以上就可以實現能播放
兼容m3u8的需要下載

 npm install --save videojs-contrib-hls

在文件中引入

 import ‘videojs-contrib-hls’
 我這么引入會出現找不到文件，我沒找到問題所在，如果這么引入不行，可以改為
 在main.js文件中
   const hls = require("videojs-contrib-hls")
   Vue.use(hls)
 這樣就好了

在頁面中測試

          {
            type: "application/x-mpegURL", // 這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網址項目
            src:
              "https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8" // url地址，從別的博主那看來的地址，親測可用
          }

至此就可以播放了

GPU云服務器云服務器兼容筆記 m3u8 m3u8 cdn cdn m3u8

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116303.html

vue-video-player使用筆記（兼容m3u8）

摘要：默認情況下將會消除任何音頻。瀏覽器選擇最佳行為立即開始加載視頻如果瀏覽器支持將播放器置于流暢模式，并在計算播放器的動態大小時使用該值。換句話說，它將按比例縮放以適應其容器。下載vue-video-player npm install vue-video-player --save 在main.js文件引入 showImg(https://segmentfault.com/img/b...

msup 2019-08-26 10:56 評論0 收藏0
關于直播視頻格式和瀏覽器兼容性歷史的來龍去脈

摘要：和格式的瀏覽器兼容性移動端因為蘋果公司對的強烈抵制以及自己定的視頻協議，所以在端原生支持格式的視頻播放而不支持的播放，而且因為蘋果在移動端的領頭作用，所以其他移動端包括瀏覽器也都原生支持格式的視頻播放。因為誤打誤撞來到了淘寶直播團隊，從開始完全不了解直播技術，現在因為leader暫時的離開，準備接手h5播放器的迭代，就不得不開始了解相關的視頻技術，先整理一下在直播技術中的視頻格式和不...

you_De 2019-08-20 15:54 評論0 收藏0
關于直播視頻格式和瀏覽器兼容性歷史的來龍去脈

摘要：和格式的瀏覽器兼容性移動端因為蘋果公司對的強烈抵制以及自己定的視頻協議，所以在端原生支持格式的視頻播放而不支持的播放，而且因為蘋果在移動端的領頭作用，所以其他移動端包括瀏覽器也都原生支持格式的視頻播放。因為誤打誤撞來到了淘寶直播團隊，從開始完全不了解直播技術，現在因為leader暫時的離開，準備接手h5播放器的迭代，就不得不開始了解相關的視頻技術，先整理一下在直播技術中的視頻格式和不...

BoYang 2019-06-21 16:15 評論0 收藏0