音频播放器Web页面集成(基于HTML5)

news2024/11/22 21:25:28

音频播放器是云点播Web播放器的重要补充,主要应用于音频为主的业务场景,基于HTML5实现PC/移动端兼容,并深度融合了视频云业务,如支持加密播放等,为用户提供简单、快速、安全、稳定的播放服务。

基础功能

支持播放上传到保利威平台的音视频文件,并且支持播放加密的音视频文件。

播放控制(播放、暂停,拖拽进度调整等)。

两套默认皮肤可选,也可以自定义样式。

格式支持 

  • 音频格式:mp3、aac、m3u8
  • 音频编码:mp3、aac
  • 视频格式:mp4、m3u8
  • 视频编码:h264

注意:

  1. 如果上传文件时设置的是默认转码方式,所有的文件都会转码为视频文件,使用音频播放器播放视频文件时,只会播放声音,没有图像。
  2. 如果上传文件时设置了"源文件播放",平台不会对源文件进行转码,播放器会直接播放源文件。建议上传mp3或aac格式的文件,其它音频格式文件,如3gp、ogg、wav、FLAC、mov等,能否正常播放取决于浏览器支持。
  3. 如果上传视频文件时设置了“生成音频文件”,平台在转码时会额外转出一份mp3文件,音频播放器会播放该mp3文件。

适配情况

mp3aacmp4m3u8
iOS✔️✔️✔️✔️
Android✔️✔️✔️4.0+
Chrome✔️✔️✔️34+
Firefox✔️✔️✔️49+
IEIE9+IE9+IE9+IE11+ for Windows 8.1+
Edge✔️✔️✔️✔️
Safari✔️✔️✔️8+

 

常见适配问题:

  1. 设置autoplay=true无效,不会自动播放
    • 移动端浏览器中音频自动播放一直是禁止的,目前通用的办法是通过用户手动触发播放(例如监听用户的点击事件并调用play方法),但不排除一些特性的浏览器和webview允许自动播放。
    • PC端Chrome 55以上版本、MacOS High Sierra Safari 11以上的浏览器也都限制自动播放。
  2. 音量调节功能(setVolume)在iOS和部分Android浏览器上不支持。
  3. 倍速播放功能(setSpeed)在部分移动端浏览器上不支持,比如Android 微信。

引入资源

<!-- 指定版本 -->
<script src="//player.polyv.net/resp/vod-audio-player/0.1.2/audio-player.min.js"></script>
<!-- 最新版本 -->
<script src="//player.polyv.net/resp/vod-audio-player/latest/audio-player.min.js"></script>

创建 HTML 节点

<div id="myAudioPlayer"></div>

创建播放器实例

const plvAudioPlayer = new PlvAudioPlayer({
  vid: '从后台获取的音频 vid',
  wrap: '#myAudioPlayer',
  skin: 'white'
});

 我的文章推荐:

  • [视频+图文] 线上研讨会是什么,企业对内对外培训可以用线上研讨会吗?
  • [图文] 企业直播对网络带宽有什么要求?
  • [图文]OBS如何实现毫秒级超低延时直播
  • 直播播放器API(播放器调用方法、参数、接口和事件)
  • 企业内训课程视频加密防下载是如何做的?10种思路
  • 超低延迟/无延迟直播(PRTC Web SDK移动端)兼容性说明

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/752241.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

冒泡排序模拟实现qsort()函数

冒泡排序模拟实现qsort函数 前言1. 分析2. 解决一&#xff0c;如何接受不同数据3. 解决二&#xff0c;如何实现不同数据的比较4. 解决三&#xff0c;如何实现不同数据交换5. 模拟bubble_sort&#xff08;&#xff09;函数排序整型所有代码实现6. 结构体排序实现7. 结尾 前言 要…

将字符串转为类名

使用globals函数将字符串转为类名 如下&#xff1a; class Data:def __init__(self):self.name kellydef hello(self):print(hello)#直接使用字符串报错 res Data().hello() #res Data.hello()res1 globals()[Data]().hello()#通过字符串获取变量数据&#xff08;变为类中…

【ACM】—蓝桥杯大一暑期集训Day1

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前专攻C/C、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL、蓝桥杯&am…

怎样优雅地增删查改(五):按组织架构查询

文章目录 原理实现应用测试 之前我们实现了Employee&#xff0c;Alarm管理模块以及通用查询应用层。 Employee的集合查询业务&#xff0c;是通过重写CreateFilteredQueryAsync方法&#xff0c;来实现按组织架构查询的过滤条件。 我们将这段逻辑代码提取到通用查询应用层中&…

【前后缀GCD】ABC125 C

C - GCD on Blackboard (atcoder.jp) 题意&#xff1a; 思路&#xff1a; 这道题&#xff0c;多看看样例大概就出来了 由样例可知&#xff0c;换成的数可以是其他N-1个数的gcd&#xff0c;这样对答案的贡献也没有影响 所以直接去枚举换的是什么数就行 因此怎么去快速求其他…

对于 Spring MVC 了解? SpringMVC 的执行流程?SpringMVC 的核心是什么?请求的流程是怎么处理的?控制反转怎么实现的?

对于 Spring MVC 了解? 之前 Model1 和 Model2 这两个没有 Spring MVC 的时代。 Model1 时代 : 整个 Web 应用几乎全部用 JSP 页面组成&#xff0c;只用少量的 JavaBean 来处理数据库连接、访问等操作。 JSP 既是控制层又是表现层&#xff0c;存在很多问题&#xff0c;如①将…

逆天!安卓正式超越 Windows 成世界第一大操作系统

导读Android是一种基于Linux的自由及开放源代码的操作系统&#xff0c;主要使用于移动设备&#xff0c;如智能手机和平板电脑&#xff0c;由Google公司和开放手机联盟领导及开发。 10 亿的用户数意味着 Windows 依然是第一大桌面操作系统&#xff0c;不过如果算上智能手机平台…

抖音seo源码矩阵系统开发规则开发者分享(一)

抖音SEO矩阵系统源码开发&#xff0c;需要遵循一下步骤 1. 确定需求和功能&#xff1a;明确系统的主要目标和需要实现的功能&#xff0c;包括关键词研究、短视频制作、外链建设、数据分析、账号设置优化等方面。 2. 设计系统架构&#xff1a;根据需求和功能确定系统的架构&am…

微信公众号错误代码:40125

微信公众号错误代码&#xff1a;40125 报错代码 错误代码&#xff1a;40125, 错误信息&#xff1a;invalid appsecret rid: 64b0ba1d-74e53e36-717abb43&#xff0c; 微信原始报文&#xff1a;{"errcode":40125,"errmsg":"invalid appsecret rid: 6…

金融数据库的战场,太平洋保险和OceanBase打了场胜仗

点击关注 文丨刘雨琦 “数据库的国产替代&#xff0c;必须经过严格的考虑&#xff0c;保证不会出错&#xff0c;所以大多数企业的领导层选择按兵不动或者简单扩容。因为不换就不会错&#xff0c;选了很久如果选错&#xff0c;还可能会出现重大事故。” 某银行数据库技术人员…

UG\NX二次开发 获取对象的边界包容盒 UF_MODL_ask_bounding_box_aligned

文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan 简介: 获取对象的边界包容盒 UF_MODL_ask_bounding_box_aligned,可以得到指定坐标系下的盒子,速度快,结果不精确 效果: 代码: //UF_MODL_ask_bounding_box_aligned #include "me.hpp" #i…

【ABAP】数据类型(六)「域的概要」

💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后端的开发语言ABAP,SQL进行任务的完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较…

Java使用EsayExcel导出模板,涉及多个sheet

需求&#xff1a;利用excel模板导出&#xff0c;有两个sheet&#xff0c;其中一个sheet涉及固定字段导出和多数 据(List)导出 1、模板 sheet1&#xff1a; sheet2&#xff1a; 2、主要代码 public static void outputExcelForTunnelMonitor(HttpServletResponse r…

EBU5476 Microprocessor System Design 知识点总结_8 I2C

I2C 连接多个模块的传输方案&#xff1a;I2C&#xff0c;使用两根总线。 两根总线分别是时钟总线 SCL 和数据总线 SDA。 通信过程 现在我们串一遍I2C上一个模块&#xff08;master&#xff09;要给另一个模块&#xff08;slave&#xff09;发消息的过程。 MCU 使用一定的方法…

玩转代码|Linux中Thread Local Storage(线程局部存储)

目录 pthread的内存结构 __thread pthread specific API __thread和pthread specific API对比 存储区域/寻址方式不同 性能/效率不同 能存储的数据不同 支持的数据个数不同 在C/C程序中&#xff0c;全局变量默认是所有线程共享的&#xff0c;开发者需要处理多线程竞争问…

如何在短时间内提高亚马逊关键词排名?

搜索购买可以在短时间内提高亚马逊关键词排名&#xff0c;操作方法是通过独立买家账号搜索关键词&#xff0c;找到商品&#xff0c;点击购买&#xff0c;提高关键词的相关性和保留率&#xff0c;让关键词排名自然提高&#xff0c;从而达到上首页的目的。不过要操作这一个方法还…

储能协调控制器装置|储能协调控制设备|储能系统功率控制器|源网荷储互动终端这种装置是什么?应用实施方案如何?

什么是储能协调控制器装置|储能协调控制设备|储能系统功率控制器|源网荷储互动终端及其应用实施方案 一&#xff1a;新型电力系统背景 以新能源为主体的新型电力系统是以新能源为供给主体、以确保能源电力安全为基本前提、以满足经济社会发展电力需求为首要目标&#xff0c;以…

Spring - 更简单的存取 Bean 对象(使用注解)

目录 一、类注解是什么 二、使用类注解 存取 Bean 对象 1. 准备工作 2. 所以使用五大类注解的规则&#xff1a; 三、五大类注解之间的关系 1. 首先可以查看 类注解的源码如下图&#xff1a; 2. 为什么需要五个类注解&#xff1f; 3. 为什么使用类注解的方式不能使用原类…

挖矿记录+解决方案:利用GitLab组件对服务器进行挖矿导致CPU占用200%

文章目录 什么是云服务器挖矿?事件记录事件分析产生影响解决方案后期预防什么是云服务器挖矿? 云服务器挖矿是指利用云服务器从事赚取比特币的活动。比特币是一种虚拟数字货币,挖矿是将一段时间内比特币系统中发生的交易进行确认,并记录在区块链上形成新区块的过程。 用于…

青岛大学_王卓老师【数据结构与算法】Week05_06_栈的顺序表示_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c; 另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础…