如何使用阿里云的播放器实现自动播放下一个章节?

作者:有用网 阅读量:181 发布时间:2024-07-17
关键字 aliplayer 自动播放

需求:我需要测试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';

#发表评论
提交评论