`
猫耳m
  • 浏览: 2445 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

用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);

作者:樰篱

分享到:
评论

相关推荐

    使用videojs/aliplayer 实现rtmp流的直播播放

    本篇文章将详细探讨如何使用videojs和aliplayer这两款强大的JavaScript库来实现RTMP流的直播播放。 首先,让我们了解videojs。Video.js是一个开源的HTML5和Flash视频播放器,提供了丰富的自定义选项和插件,使得...

    VueAliPlayer一个基于viewaliplayer的Vue2x视频播放器组件

    总的来说,VueAliPlayer是Vue.js开发中处理视频播放的强大工具,它结合了Vue的组件化思想和阿里云播放器的强大功能,让开发者在构建富媒体应用时更加得心应手。通过深入理解和熟练运用VueAliPlayer,可以提升项目...

    阿里云播放器完善-播放视频url

    本教程将详细介绍如何在Android项目中集成阿里云播放器,并实现视频播放、进度控制、音量与亮度调节以及全屏功能。 首先,你需要在项目中引入阿里云播放器的SDK。这通常通过在`build.gradle`文件中添加依赖来完成。...

    前端播放器(阿里云视频播放)

    在IT行业中,前端播放器是实现音视频内容在网页上流畅播放的关键技术。阿里云视频播放解决方案提供了一整套高效、稳定且功能丰富的播放服务,适用于各种在线教育、直播、点播等应用场景。本篇文章将深入探讨前端...

    js利用阿里播放器实现流媒体播放

    首先,m3u8是一种基于HTTP Live Streaming (HLS)的多媒体播放列表格式,由Apple公司提出,用于在低带宽环境下流畅播放视频。HLS是一种流媒体传输协议,它将视频分割成小段的TS文件,并通过一个m3u8索引文件来控制...

    支持IJKPlayer、Media3(EXOPlayer2)、MediaPlayer、AliPlayer实现了多功能的视频播放器

    270之类),重力旋转与手动旋转的同步支持,支持列表播放 ,直接添加控件为封面,列表全屏动画,视频加载速度,列表小窗口支持拖动,动画效果,调整比例,多分辨率切换,支持切换播放器,进度条小窗口预览,其他一些...

    支持IJKPlayer、Media3(EXOPlayer2),MediaPlayer、AliPlayer实现了多功能的视频播放器

    270之类),重力旋转与手动旋转的同步支持,支持列表播放 ,直接添加控件为封面,列表全屏动画,视频加载速度,列表小窗口支持拖动,动画效果,调整比例,多分辨率切换,支持切换播放器,进度条小窗口预览,其他一些...

    vue-aliplayer-v2.zip

    Vue-阿里云Aliplayer-v2是一个基于Vue.js框架实现的阿里云播放器组件,它提供了在Web应用中集成阿里云视频播放服务的功能。这个项目是开源的,可以在GitHub上找到,具体地址为...

    vue-aliplayer-v2:这是一个基于Alipayer开发并封装成vue组件的播放器。可播放rtmp,m3u8,mp4 ....视频。除支持直播流与点播的基础功能外,还支持视频的加密播放,设置切换,直播时移等业务场景等.https

    vue中使用Alipayer,播放rtmp,m3u8,mp4视频 假如此轮对您有帮助,请顺手star一下吧.o(  ̄︶ ̄ )o 1.安装使用!下载安装npm包 npm i vue-aliplayer-v2 --save or yarn add vue-aliplayer-v2 总体注册main.js ...

    H5+Aliplayer 直播插件+弹幕插件

    Demo是H5+Aliplayer方式直播+弹幕插件Index是直播,123页面是加了弹幕。如果真实直播需要OBS推流方式。不过练手还不错的。

    AlivcPlaySDK2.1.0_Android阿里云视频播放

    阿里云视频播放SDK 2.1.0 是一款专为...总之,阿里云视频播放SDK 2.1.0 是一个强大的工具,为Android开发者提供了全面的视频播放解决方案,无论是在直播还是点播场景下,都能帮助开发者轻松实现高质量的视频播放功能。

    支持IJKPlayer、 EXOPlayer2、MediaPlayer、AliPlayer,实现了多功能的视频播放器

    270之类),重力旋转与手动旋转的同步支持,支持列表播放 ,直接添加控件为封面,列表全屏动画,视频加载速度,列表小窗口支持拖动,动画效果,调整比例,多分辨率切换,支持切换播放器,进度条小窗口预览,其他一些...

    基于aliplayer使用react封装的播放器源码.zip

    综上所述,这个压缩包中的源码是一个使用TypeScript和React.js开发的自定义视频播放器组件,它基于阿里云播放器进行封装,适用于需要在React应用中集成高质量视频播放功能的开发者。开发者可以通过学习和研究这个...

    WeexAliPlayer源码.zip

    5. **视频渲染**:AliPlayer在底层可能使用了硬件加速来优化视频播放性能,源码中可能会涉及这部分的实现细节。 6. **错误处理与日志**:源码可能会包含错误捕获和日志记录机制,这对于调试和优化组件性能至关重要...

    h5阿里播放器源码_h5播放_h5阿里播放器源码_bigplay.com_

    3. 自适应流媒体:根据用户的网络环境,动态调整视频质量,确保视频播放流畅,同时优化带宽使用。 4. 播放器UI定制:通过丰富的API接口,开发者可以自由定制播放器的外观和功能,满足各种应用场景的需求。 三、PHP...

    阿里云基础播放器-播放视频url

    为了播放视频,调用`start()`方法: ```java mediaPlayer.start(); ``` 同时,为了处理播放状态的变化,你可以监听`AliVcMediaPlayer`的事件回调,比如播放完成、错误发生等: ```java mediaPlayer....

    移动端视频播放插件

    移动端视频播放插件移动端视频播放插件移动端视频播放插件移动端视频播放插件移动端视频播放插件

    videojs播放rtmp流,测试代码

    videojs播放rtmp流,测试代码,需要部署到服务器上(包括但不限于tomcat,iis), 路径为test/tes2.html。videojs播放rtmp流,测试代码,需要部署到服务器上(包括但不限于tomcat,iis), 路径为test/tes2.html。video...

    react-native-aliplayer:react-native-alilayer

    阿里云点播播放器 RN 封装,支持多种播放格式,支持 android 和 ios Getting started $ npm install react-native-aliplayer --save Mostly automatic installation $ react-native link react-native-aliplayer ...

Global site tag (gtag.js) - Google Analytics