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

video 视屏播放

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

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

1、百度云提供的方法

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

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

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

posted @ 2018-07-18 19:38  海浪w  阅读(8732)  评论(0)  编辑  收藏  举报