vue video標簽播放.m3u8格式文件

video 視屏播放

video是不支持m3u8格式的文件的播放的，今天就遇到這個問題

后台返回的播放路徑是帶.m3u8的，我直接把路徑添加到src上面播放不出來
以為是后台傳給我的路徑有問題，就問了一下后台，他才給我說的是文件是m3u8的，我在網上查了一下又很多辦法，我選了百度雲的一個辦法

1、百度雲提供的方法

• 百度雲的方法首先要引入它的一個js文件（https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js），這個是在線的路徑，就使用這個吧
• 百度雲使用的方法要簡單一些，很快的就解決了video不能播放m3u8這種格式的文件了

現在可以看一下我使用的代碼了

<!-- html -->
	<!-- 給div設置一個id -->
	<div id="playercontainer"></div>

<!-- js -->
	<script type="text/javascript">
	    var player = cyberplayer("playercontainer").setup({
	        width: 680, // 寬度，也可以支持百分比(不過父元素寬度要有)
	        height: 448, // 高度，也可以支持百分比
	        title: "基本功能", // 標題
	        file: "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4", // 播放地址
	        image: "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.jpg", // 預覽圖
	        autostart: false, // 是否自動播放
	        stretching: "uniform", // 拉伸設置
	        repeat: false, // 是否重復播放
	        volume: 100, // 音量
	        controls: true, // controlbar是否顯示
	        starttime: 0, // 視頻開始播放時間點(單位s)，如果不設置，則可以從上次播放時間點續播
	        logo: { // logo設置
	            linktarget: "_blank",
	            margin: 8,
	            hide: false,
	            position: "top-right", // 位置
	            file: "./img/logo.png" // 圖片地址
	        },
	        ak: "xxxxxxxxxxxxxxxx" // 公有雲平台注冊即可獲得accessKey
	    });
	</script>

這就可以實現video播放m3u8格式的文件了

我在vue里面是這樣做的

• 需要引入的那個js文件我是直接在掛載頁面index.html這個文件引入的

• 組件里面給一個div設置個id和上面一樣沒改id

• js是在methods里面寫了個方法，在接口請求完成后調用這個方法

•     // 百度播放解析
      this.baiduMp4(data.video.play_url, data.video.img)
      在網方法里面傳了一個視頻的路徑，和圖片的路徑
  

• baiduMp4() 這個方法如下

    baiduMp4(mp4Url, imgUrl) {
        var player = cyberplayer("playercontainer").setup({
          width: 1015, // 寬度，也可以支持百分比(不過父元素寬度要有)
          height: 574, // 高度，也可以支持百分比
          title: "基本功能", // 標題
          file: mp4Url, // 播放地址
          image: imgUrl, // 預覽圖
          autostart: false, // 是否自動播放
          stretching: "uniform", // 拉伸設置
          repeat: false, // 是否重復播放
          volume: 100, // 音量
          controls: true, // controlbar是否顯示
          starttime: 0, // 視頻開始播放時間點(單位s)，如果不設置，則可以從上次播放時間點續播
          logo: { // logo設置
              linktarget: "_blank",
              margin: 8,
              hide: false,
              position: "top-right", // 位置
              file: "./img/logo.png" // 圖片地址
          },
          ak: "這里要寫自己的ak碼" // 公有雲平台注冊即可獲得accessKey
        });
      }
  

這樣就解決了今天的這個問題了