web实践Video视频应用——推荐aliyun播放器

公司是一个视频社交平台，H5也免不了使用video标签，经久实践（也可能是技术不达标）配置vue-video-player播放m3u8文件很多坑点，要配置很多东西，加配个plugin —— videojs-contrib-hls，基于videojs玩儿起来有点费劲，很难受。

基于业务，我们还是需要一个快、狠、准的API来做业务，那么测试aliyun播放器还特么扣以。

填入source，即用即放，简单开发使用的配方。

如果使用aliyun点播的童鞋还可以使用到更多的配置方向的东西，没有接入aliyun点播的话也可以直接引入script标签直接使用，可以说是开箱即用了。

废话少叙，代码介入~（代码是vue的代码）

可见设置其实也很多，但是相对来说比较丰富简单。

首先，引入aliyun播放器的script是必要的

/*
首先是css文件，样式
其次是js文件
当你需要自定义的时候，可以不使用其css文件
*/
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.1/aliplayer-min.js"></script>

其次就是使用了，下面代码：

<template>
     <div  class="player" id="video"></div>
</template>
<script>
export default {
    data(){
        return {
            player:{},
        }
    },
    mounted(){
        /* 当你没有其他配置的时候。如下代码就已经够用 */
        this.player = new Aliplayer({
            id: 'video', //container element ID
            source : this.$route.query.uri, //源文件  不需要你配置video类型，很爽的一点。
        })
        /*aliyun播放器事件项*/
        this.player.on('ready', e => console.log('----准备成功开始播放----'))
        this.player.on('waiting', e => console.log(e)) //视频请求等待中
        this.player.on('play', e => console.log(e))//开始播放
        his.player.on('pause', e => console.log(e))//停止
        this.player.on('ended', e => console.log(e))//播放结束
        this.player.on('timeupdate',e => console.log(e))//进度 ++
        this.player.on('error',e => console.log(e))//播放错误
        this.player.on('m3u8Retry',e => console.log(e))//m3u8请求错误
        /* and so on ... 还有几个不是很常用的事件 可以看aliyunapi */
    }
}
</script>

参考文档:

• Web播放器
• web播放器常见问题
• 如何启用H5的同层播放
• 产品介绍
• Java版
• 如何使用皮肤