vue video标签播放.m3u8格式文件

video 视屏播放

video是不支持m3u8格式的文件的播放的，今天就遇到这个问题

后台返回的播放路径是带.m3u8的，我直接把路径添加到src上面播放不出来
以为是后台传给我的路径有问题，就问了一下后台，他才给我说的是文件是m3u8的，我在网上查了一下又很多办法，我选了百度云的一个办法

1、百度云提供的方法

• 百度云的方法首先要引入它的一个js文件（ https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js ），这个是在线的路径，就使用这个吧
• 百度云使用的方法要简单一些，很快的就解决了video不能播放m3u8这种格式的文件了

现在可以看一下我使用的代码了

这就可以实现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
  });
  }

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