用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

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

目录
相关文章
|
存储 Dart 数据库
Flutter笔记:状态提升、控制器模式、GetX控制器和服务
Flutter笔记:状态提升、控制器模式、GetX控制器和服务
790 0
|
人工智能 开发工具 网络架构
魔哈:Grok国内镜像
xAI 宣布正式开源 3140 亿参数的混合专家(MoE)模型「Grok-1」,以及该模型的权重和网络架构。这也使得Grok-1成为当前参数量最大的开源大语言模型。
1218 0
 魔哈:Grok国内镜像
|
编解码 网络协议 前端开发
OFDM深入学习及MATLAB仿真(一)
OFDM深入学习及MATLAB仿真
1610 1
|
弹性计算 数据可视化 关系型数据库
【最佳实践】Filebeat实现MySQL日志轻量化发送至Elasticsearch
在今天的文章中,我们来详细地描述如果使用Filebeat把MySQL的日志信息传输到Elasticsearch中。
4647 0
【最佳实践】Filebeat实现MySQL日志轻量化发送至Elasticsearch
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
Transformer架构:重塑现代AI的核心引擎
Transformer架构:重塑现代AI的核心引擎
419 98
|
JavaScript 小程序 前端开发
[Vue warn]: Error in callback for watcher “fileList“: “TypeError: Cannot create property ‘uid‘ on st
[Vue warn]: Error in callback for watcher “fileList“: “TypeError: Cannot create property ‘uid‘ on st
397 0
|
2月前
|
XML 人工智能 定位技术
如何让AI更懂你?掌握提示词与上下文工程的核心思维
本文深入解析与大型语言模型交互的核心技巧,涵盖提示词(Prompt)、提示词工程与上下文工程三大关键概念,助你从AI用户进阶为高效引导者,全面提升AI应用能力。
|
搜索推荐 安全 API
|
存储 Oracle 关系型数据库
Oracle和MySQL有哪些区别?从基本特性、技术选型、字段类型、事务、语句等角度详细对比Oracle和MySQL
从基本特性、技术选型、字段类型、事务提交方式、SQL语句、分页方法等方面对比Oracle和MySQL的区别。
2223 18
Oracle和MySQL有哪些区别?从基本特性、技术选型、字段类型、事务、语句等角度详细对比Oracle和MySQL
|
机器学习/深度学习 存储 自然语言处理
如何微调(Fine-tuning)大语言模型?
本文介绍了微调的基本概念,以及如何对语言模型进行微调。
1569 16