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
        });
      }
  

这样就解决了今天的这个问题了