阿里云播放器SDK 不断读取播放事件【内部用】

简简单单学习阿里云播放器

集成JS SDK
通过简单阅读帮助手册，直接得到如下测试代码，尝试部署到本地搭建的服务器端，即可运行

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><title>用户测试用例</title><link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.18/skins/default/aliplayer-min.css" /><script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.18/aliplayer-min.js"></script></head><body><div class="prism-player" id="J_prismPlayer"></div><script>var player = new Aliplayer({id: 'J_prismPlayer',width: '100%',autoplay: true,//cover: '<your cover URL>',//可选公共参数。视频封面图片地址。用户自定义的可以被访问到的网络图片。本参数传入的URL优先级最高，会覆盖通过获取视频播放凭证接口获取的CoverURL。// 播放方式一、播放地址播放。此方式播放优先级最高。source : 'https://player.alicdn.com/video/aliyunmedia.mp4',//播放方式一必选参数。可以是第三方直播或点播地址、阿里云直播服务中的播放地址，或阿里云点播服务中的播放地址。},function(player){console.log('The player is created.')});</script></body>
</html>

如果希望快速的修改代码，可以参考如下地址进行可视化配置。
https://player.alicdn.com/aliplayer/setting/setting.html

播放过程中不断读取播放时间

实测过程中发现 playing 事件并不能反复被触发，相应的 timeupdate 事件却可以。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><title>用户测试用例</title><link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.18/skins/default/aliplayer-min.css" /><script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.18/aliplayer-min.js"></script>
</head><body><div class="prism-player" id="J_prismPlayer"></div><script>var player = new Aliplayer({id: 'J_prismPlayer',width: '100%',autoplay: true,//cover: '<your cover URL>',//可选公共参数。视频封面图片地址。用户自定义的可以被访问到的网络图片。本参数传入的URL优先级最高，会覆盖通过获取视频播放凭证接口获取的CoverURL。// 播放方式一、播放地址播放。此方式播放优先级最高。source: 'https://player.alicdn.com/video/aliyunmedia.mp4', //播放方式一必选参数。可以是第三方直播或点播地址、阿里云直播服务中的播放地址，或阿里云点播服务中的播放地址。}, function (player) {player.on('timeupdate', () => { // 播放位置发生改变时触发，仅H5播放器。let time = player.getCurrentTime() // 获取播放的时间console.log(time);});});// var handleReady = function(e){//     console.log(e);// }// player.on('ready',handleReady);var timer = null;// getTime();function getTime() {var currentTime = player.getCurrentTime();//to doconsole.log(1111);timer = setTimeout(getTime, 1000);}//清除定时器function clear() {if (timer) {clearTimeout(timer);timer = null;}}player.on('ended', function (e) {clear();});player.on('pause', function (e) {clear();});player.on('error', function (e) {clear();});</script>
</body>
</html>

记录时间

2022年度 Flag，写作的 568 / 1024 篇。
可以关注我，点赞我、评论我、收藏我啦。

更多精彩

Python 爬虫 100 例教程导航帖（连续 3 年，不断更！）
Python爬虫120 （39.9 元，保 5 年更新）

阿里云播放器SDK 不断读取播放事件【内部用】相关推荐

阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
Swift 第三方播放器AliyunPlayer,音乐(阿里云播放器)(源码)
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
uniapp插件-腾讯云播放器sdk插件-腾讯云高清播放器-多码率支持-截图-播放控制-变速播放
目前仅做了安卓版本,如果需求量可以的话我们会制作IOS版本的. 使用方法: 腾讯云播放器腾讯云目前是免费的,后期不知道,需要注册请访问腾讯云官网,优雅草伙伴注册链接: 点击访问腾讯云官网关联优雅草科 ...
h5阿里云播放器常规使用
阿里云播放器: 引入js和css <script type="text/javascript" charset="utf-8" src="htt ...
阿里云播放器AliyunPlayer的走马灯组件的位置
引入当前组件, 播放器配置中添加如下代码: components: [{name: 'BulletScreenComponent',type: AliPlayerComponent.BulletScr ...
在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
解决ijkplayer和阿里云播放器冲突的解决
ijkplayer和阿里云播放器的冲突问题解决今天遇到导入阿里云的播放器跟自身的ijkplayer播放器产生冲突的问题 ijkplayer 报错 IJKSDLGLView: setupDisplay ...
nuxt项目打包后阿里云播放器错误：ReferenceError Aliplayer is not defined
nuxt项目打包后阿里云播放器错误:ReferenceError: Aliplayer is not defined 这个问题搞了我一天,阿里云视频播放有时点进去是好的,有时候就报错,而且一刷新也报这 ...
关于，VUE中，阿里云播放器报错：Aliplayer is not defined。
VUE中,阿里云播放器报错:Aliplayer is not defined.-Java-CSDN问答感谢@iMingzhen大哥的解答!
实践：基于腾讯云播放器SDK，带您体验播放多场景下的 COS 视频文件
一. 实践步骤 1. 准备您的腾讯云COS 视频文件链接,您需要: 1.1 创建一个存储桶: 1.2 上传对象: 1.3 在对象信息详情里复制对象地址: 注意: 目前腾讯云有COS特惠活动,新人1元 ...

阿里云播放器SDK 不断读取播放事件【内部用】

简简单单学习阿里云播放器

播放过程中不断读取播放时间

记录时间

阿里云播放器SDK 不断读取播放事件【内部用】相关推荐

最新文章

热门文章