用aliplayer如何实现视频的连续播放?

简介: 场景 假如有多个视频,在上一个视频播放完毕时,自动播放下一个视频,要怎么处理的呢?需要按使用的播放器类型和切换的地址格式,采用不同的实现方式。 直播地址方式 这种方式最简单,h5和flash的行为都是一致的,只需要订阅'ended', 在ended事件里,调用loadByUrl方法, 参数为下一个视频的地址。

场景

假如有多个视频,在上一个视频播放完毕时,自动播放下一个视频,要怎么处理的呢?需要按使用的播放器类型和切换的地址格式,采用不同的实现方式。

直播地址方式

这种方式最简单,h5和flash的行为都是一致的,只需要订阅'ended', 在ended事件里,调用loadByUrl方法, 参数为下一个视频的地址。

function endedHandle()
{
  var newUrl = "";
  player.loadByUrl(newUrl);
}

player.on("ended", endedHandle);

vid+playauth Saas播放方式

vid和playauth Saas播放方式,h5和flash需要不同的处理方式:

  • h5在ended事件里调用replayByVidAndPlayAuth方法,参数为vid和新的playauth值。
  • flash没有提供切换vid和playauth的方法,需要销毁,重新创建播放器。

注意:playauth的有效期只有100s, 调用replayByVidAndPlayAuth方法时,需要重新生产获取playauth

H5 Player

function endedHandle()
{
  var newPlayAuth = ""; 
  player.replayByVidAndPlayAuth(vid,newPlayAuth);
}

player.on("ended", endedHandle);

Flash Player

function endedHandle()
{
    var newPlayAuth = ""; 
    player.dispose(); //销毁
    $('#J_prismPlayer').empty();//id为html里指定的播放器的容器id
     //重新创建
    player = new Aliplayer({
              id: 'J_prismPlayer',
              autoplay: true,
              playsinline:true,
              vid: vid,
              playauth:newPlayAuth,
              useFlashPrism:true
         });
    }
}

player.on("ended", endedHandle);

地址协议不一样切换地处理

如果原来播放的是mp4的视频,现在新的地址是hls的视频地址,这种情况只能重新创建播放器。

function endedHandle()
{
    var newUrl = ""; //新的播放地址
    player.dispose(); //销毁
    $('#J_prismPlayer').empty(); //id为html里指定的播放器的容器id
     //重新创建
    player = new Aliplayer({
              id: 'J_prismPlayer',
              autoplay: true,
              playsinline:true,
              source:newUrl
         });
    }
}

player.on("ended", endedHandle);

为了扶持更多创业者,降低入行门槛,视频点播已在原有的视频点播服务五个套餐包基础上,推出了超值体验套餐包。
只需9.9元即可获得10GB流量、50GB存储、100分钟转码,可供个人、小微企业门户网站体验使用。

image

点击进入活动页面,立即购买,完成支付

目录
相关文章
|
1月前
ThreeJs手动控制动画播放与暂停
这篇文章介绍了如何在Three.js中手动控制动画的播放与暂停,包括设置动画混合器、监听按键事件以调整动画状态和速度的方法。
44 0
ThreeJs手动控制动画播放与暂停
|
2月前
|
编解码 算法 图形学
同一路RTSP|RTMP流如何同时回调YUV和RGB数据实现渲染和算法分析
我们播放RTSP|RTMP流,如果需要同时做渲染和算法分析的话,特别是渲染在上层实现(比如Unity),算法是python这种情况,拉两路流,更耗费带宽和性能,拉一路流,同时回调YUV和RGB数据也可以,但是更灵活的是本文提到的按需转算法期望的RGB数据,然后做算法处理
|
5月前
|
API Android开发 Kotlin
kotlin 音频播放,多音轨同时播放,音频播放期间,可以随时设置播放速度
在Android中,`SoundPool` 适合播放短音频但不支持直接改变播放速度。若需调整播放速度,可使用 `AudioTrack` 或 `MediaPlayer`。以下是一个使用 `MediaPlayer` 实现多音轨播放并调整播放速度的简单Kotlin代码示例,特别注意,`setPlaybackParams` 方法在API 23及以上版本才能调整播放速度。别忘了在不再使用时释放 `MediaPlayer` 资源以防止内存泄漏。
uniapp视频数组,点击播放-播放当前视频,其余暂停demo效果(整理)
uniapp视频数组,点击播放-播放当前视频,其余暂停demo效果(整理)
|
JavaScript 前端开发
video设置播放时间点及常用属性和方法
video设置播放时间点及常用属性和方法
|
前端开发 Android开发 开发者
Android平台RTSP、RTMP播放端如何实现YUV或ARGB数据按设定角度旋转
做音视频RTSP或RTMP直播播放器的时候,不免会遇到这样的诉求,实时播放或快照的时候,由于前端摄像头安装角度不一定是正向,导致播放或快照的时候,视频view显示的画面是呈90° 180°甚至270°旋转的。
172 0
播放视频时有残影、水纹的原因
播放视频时有残影、水纹的原因
176 0
【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )
【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )
587 0
【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )
【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )(二)
【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )(二)
879 0
【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )(二)