用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

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

目录
相关文章
|
编解码 移动开发 JavaScript
html页面播放视频编码是265的m3u8的流媒体地址
html页面播放视频编码是265的m3u8的流媒体地址
1226 0
|
存储 编解码 缓存
Qt开发技术:Qt绘图系统(一)绘图系统介绍
Qt开发技术:Qt绘图系统(一)绘图系统介绍
Qt开发技术:Qt绘图系统(一)绘图系统介绍
|
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
617 0
|
3月前
|
开发框架 Java 数据库连接
一张图讲完Java 30年发展史,看完彻底搞懂版本演进
这篇Java版本演进指南,用一天时间理清30年发展脉络:从JDK 1.0“一次编写,到处运行”,到JDK 8函数式革命(Lambda/Stream),再到JDK 17/21 LTS新标配(var/record/虚拟线程)。帮你告别版本困惑,读懂面试考点,选对生产版本。
一张图讲完Java 30年发展史,看完彻底搞懂版本演进
|
人工智能 数据可视化 安全
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw,结合飞书CLI等工具,让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念:未来软件应为AI而生,CLI即AI的“手脚”,实现高效、安全、可控的智能自动化。
35283 57
|
9月前
|
存储 供应链 数据可视化
RFID为托盘量身打造唯一身份识别标识
托盘是仓储物流的核心载体,RFID技术为其赋予唯一“电子身份证”,实现身份唯一化、数据实时化、管理高效化。通过非接触批量读取、抗干扰强等优势,提升出入库效率、资产盘点速度与供应链追溯能力,推动物流智能化升级。(238字)
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
Transformer架构:重塑现代AI的核心引擎
Transformer架构:重塑现代AI的核心引擎
750 98
|
机器学习/深度学习 存储 算法
《匿名化技术:数据隐私与价值挖掘的平衡探索》
在数据驱动的时代,数据成为企业和组织的核心资产,匿名化技术作为保护数据隐私的重要手段备受关注。它通过去除或混淆个人身份信息,如数据脱敏、泛化和加密等方法,有效保护隐私。然而,匿名化可能影响数据的完整性和准确性,进而影响价值挖掘。为平衡隐私保护与数据利用,需明确使用目的、加强数据治理、创新技术应用,确保数据安全合规,推动数字经济健康发展。
907 30
|
机器学习/深度学习 存储 自然语言处理
如何微调(Fine-tuning)大语言模型?
本文介绍了微调的基本概念,以及如何对语言模型进行微调。
2546 16
|
小程序 前端开发 Java
支付宝小程序 PHP 获取用户手机号 验签解密 RSA解密 AES解密
支付宝小程序 PHP 获取用户手机号 验签解密 RSA解密 AES解密
2039 0