需求:我需要测试mp4切片成m3u8后,视频是否能完整播放,是否有卡顿,错误的情况?
工具:aliplayer
在使用工具的过程中我遇到了一个问题,就是如何自动播放下一个章节实现无人值守自动播放。
问题:如何使用阿里云的播放器实现自动播放下一个章节?播放结束事件怎么写,写在哪?下一个视频地址如何获取?
以下代码实现了自动播放的基本逻辑
<script>
var index = 0;
var player = new Aliplayer({
id: "p",
source: "{$first}",
width: "100%",
height: "500px",
autoplay: true,
isLive: false,
components: [{
name: 'PlaylistComponent',
type: AliPlayerComponent.PlaylistComponent,
args: [
{$list}
]
}]
},
function (player) {
player.on("ended", function(e) {
//这里直接写播放下一集的逻辑即可
index += 1;
endedHandle(index)
})
});
//播放结束事件
function endedHandle(num){
$.ajax({
url: "/index/index/test",
type: 'post',
data: {num:num},
success: function(res)
{
var newUrl = res.data;
player.loadByUrl(newUrl);
}
})
}
</script>
上述代码默认打开会播放视频列表的第一个视频,{$first}就是第一个视频的视频地址,{$list}是给的播放器的视频列表(可有可无),默认js 里面有个index初始为0,当第一个视频播放结束的时候,index加1,变成了1,请求ajax获取第二个视频的地址,至此问题全部解决。
当然方法有很多种,我这只是其中的一种,还需要多多专研。
后台控制器里面的数据如下:
$list[0] ='http://127.0.0.1:8888/m3u8/1/60e2c9806ed0b0/60e2c9806ed0b.m3u8';
$list[1] ='http://127.0.0.1:8888/m3u8/1/60e3f20355f451/60e3f20355f45.m3u8';
$list[2] ='http://127.0.0.1:8888/m3u8/1/6193132e8e4302/6193132e8e430.m3u8';
$list[3] ='http://127.0.0.1:8888/m3u8/1/61931d75a5c8e3/61931d75a5c8e.m3u8';
$list[4] ='http://127.0.0.1:8888/m3u8/1/61931df8130f64/61931df8130f6.m3u8';
$list[5] ='http://127.0.0.1:8888/m3u8/1/61931e810372c5/61931e810372c.m3u8';