用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

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

目录
相关文章
|
Web App开发 UED iOS开发
阿里云 Aliplayer高级功能介绍(九):自动播放体验
经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Aliplayer也专们做过优化,提供一些方式让客户能更好的处理这种情况。
9360 0
阿里云 Aliplayer高级功能介绍(六):进度条标记
基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: 接口和属性介绍 播放器提供了progressMarkers属性,是一个数组类型,每一条记录包含o.
13744 1
|
算法 应用服务中间件 nginx
宝塔面板Nginx开启Brotli压缩,提升网站加载速度-【给网站提提速】
Google 认为互联网用户的时间是宝贵的,他们的时间不应该消耗在漫长的网页加载中,因此在 2015 年 9 月 Google 推出了无损压缩算法 `Brotli`。`Brotli` 通过变种的 `LZ77` 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩,与 `Gzip`相比效率提升约 `17-25%`。这里简单说一下如何在宝塔面板Nginx开启Brotli压缩。
413 0
宝塔面板Nginx开启Brotli压缩,提升网站加载速度-【给网站提提速】
|
9月前
|
缓存
npm install 一直卡着不动如何解决
npm install 一直卡着不动如何解决
3430 0
|
SQL 关系型数据库 MySQL
Navicat使用HTTP通道连接MySQL(远程mysql3306端口关闭或者只允许localhost链接状态)...
Navicat使用HTTP通道连接MySQL(远程mysql3306端口关闭或者只允许localhost链接状态)...
4619 0
Navicat使用HTTP通道连接MySQL(远程mysql3306端口关闭或者只允许localhost链接状态)...
|
9月前
|
存储 数据处理 项目管理
交付工程师准备工作
交付工程师准备工作
528 0
|
JavaScript
解决VUE项目window.open()方法打包部署上线报错404
解决VUE项目window.open()方法打包部署上线报错404
452 0
|
存储 分布式计算 网络协议
【小白视角】大数据基础实践(三)HDFS的简单基本操作
HDFS的简单基本操作 1. 实验环境 2. HDFS 2.1 简介 2.2 体系结构 2.2.1 NameNode 2.2.2 SecondaryNameNode 2.2.3 DataNode 2.2.4 通讯协议 2.2.5 局限性 3. 利用Shell命令HDFS进行交互 3.1 概要 3.2 目录操作 3.3 文件操作 4. 利用web界面管理HDFS 5. 使用JavaApi进行管理HDFS 5.1 导包并测试 5.2 题目 第一题 第二题 第三题 6. 在集群上运行 7. 结语 最后
402 0
【小白视角】大数据基础实践(三)HDFS的简单基本操作
|
存储 Cloud Native 物联网
首发!阿里云重磅发布《云网络白皮书》,开启云网络3.0时代
阿里云网络一线技术专家共同编写的《云网络白皮书》正式发布,成为业界首本云网络专业领域白皮书。
8110 0
首发!阿里云重磅发布《云网络白皮书》,开启云网络3.0时代
|
JavaScript 前端开发
如何使用 splitChunks 精细控制代码分割(上)
前端小伙伴都知道,为了降低包大小,经常会把依赖的前端模块独立打包,比如把 vue、vue-router 打到一个单独的包 vendor 中。另外,常会将存在多个路由的复杂页面的每个页面都单独打一个包,只有访问某个页面的时候,再去下载该页面的js包,以此来加快首页的渲染。 无论是 react 还是 vue 都提供了完善的工具,帮我们屏蔽了繁琐的配置工作。当我们对代码进行构建时,已经自动帮我们完成了代码的拆分工作。 所以,很多小伙伴并不知道背后到底发生了什么事。至于为什么这么拆分,到底如何控制代码的拆分,更是一头雾水了。

热门文章

最新文章