用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

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

目录
相关文章
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
1415 0
|
14天前
ThreeJs手动控制动画播放与暂停
这篇文章介绍了如何在Three.js中手动控制动画的播放与暂停,包括设置动画混合器、监听按键事件以调整动画状态和速度的方法。
19 0
ThreeJs手动控制动画播放与暂停
|
4月前
|
API Android开发 Kotlin
kotlin 音频播放,多音轨同时播放,音频播放期间,可以随时设置播放速度
在Android中,`SoundPool` 适合播放短音频但不支持直接改变播放速度。若需调整播放速度,可使用 `AudioTrack` 或 `MediaPlayer`。以下是一个使用 `MediaPlayer` 实现多音轨播放并调整播放速度的简单Kotlin代码示例,特别注意,`setPlaybackParams` 方法在API 23及以上版本才能调整播放速度。别忘了在不再使用时释放 `MediaPlayer` 资源以防止内存泄漏。
|
JavaScript
Vue使用Echarts折线图,实现点击播放、暂停、选择播放倍数;实现数据直播功能
Vue使用Echarts折线图,实现点击播放、暂停、选择播放倍数;实现数据直播功能
118 0
uniapp视频数组,点击播放-播放当前视频,其余暂停demo效果(整理)
uniapp视频数组,点击播放-播放当前视频,其余暂停demo效果(整理)
|
JavaScript 前端开发
video设置播放时间点及常用属性和方法
video设置播放时间点及常用属性和方法
|
前端开发 Android开发 开发者
Android平台RTSP、RTMP播放端如何实现YUV或ARGB数据按设定角度旋转
做音视频RTSP或RTMP直播播放器的时候,不免会遇到这样的诉求,实时播放或快照的时候,由于前端摄像头安装角度不一定是正向,导致播放或快照的时候,视频view显示的画面是呈90° 180°甚至270°旋转的。
169 0
|
语音技术 Android开发
Android使用SoundPool播放语音,并实现按顺序延时播放
Android使用SoundPool播放语音,并实现按顺序延时播放
播放视频时有残影、水纹的原因
播放视频时有残影、水纹的原因
169 0
|
移动开发 编解码 前端开发
这段代码可以将Canvas录制为webm视频文件
2020年6月我做了一个给程序员专用的虚拟鼓励师插件叫“Rainbow Fart Waifu”,VSCode和HBuilderX的插件市场里都可以搜到。
418 0
这段代码可以将Canvas录制为webm视频文件