播放器事件/与JS交互
播放器事件:
名称 | 说明 |
---|---|
s2j_onPlayerInitOver | 播放器初始化完毕时触发。播放器提供的方法需要在此事件发生后才可以调用。 |
s2j_onReadyPlay | 在已加载足够的数据能够开始播放视频时触发, 注:移动端不触发此事件。 |
s2j_onPlayStart | 视频初次播放时触发,。 |
s2j_onVideoPlay | 视频初次播放或由暂停恢复播放时触发。 |
s2j_onVideoPause | 视频暂停时触发。 |
s2j_onVideoSeek | 视频拖拽进度时触发,参数返回开始、结束seek的时间点以及vid。 |
s2j_onPlayOver | 当前视频播放完毕时触发。 |
s2j_volumeChange | 播放音频发生变化时触发,变化后的音量。 |
s2j_onFullScreen | 播放器进入全屏时触发。 |
s2j_onNormalScreen | 播放器退出全屏时触发。 |
s2j_onPlayerError | 播放出现错误时触发。 |
HTML5Load | Flash切换至H5播放器时触发。 |
flashLoad | PC端H5播放器切换至Flash播放器时触发。 |
serverError | 发生业务逻辑错误时触发,比如授权验证失败、域名黑白名单验证不通过等错误。参数返回事件名称和错误代码。 |
onChangeMode | 音视频模式切换时触发,,切换后模式以及切换前模式。 |
onFullscreenProxy | 当设置fullscreenProxy参数为true时,点击全屏按钮不会调用全屏api,会触发 window.onFullscreenProxy(vid, toFullscreen) 事件,调用者自行做全屏处理,适合在全屏状态下叠加用户自定义的元素。 |
onFullPageScreen | 当设置full_page_screen为true时,点击网页全屏按钮会触发window.onFullPageScreen(vid, currentStatus) 事件,调用者自行做网页全屏处理。 |
JS交互代码实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5播放器JS交互,酷播云</title>
<meta name="keywords" content="html5播放器实例">
<meta name="description" content="html5播放器调用实例效果展示">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style type="text/css">
.mt20 {margin-top:20px;}
.tit { clear:both; font-weight:bold;height:40px; line-height:40px; }
.tit span { font-weight:normal; font-size:12px; }
.btnlist { line-height:40px; }
.btnlist a,.btnlist a:link,.btnlist a:visited{ height:40px; display:block; width:150px;float:left; background:#efefef; border:1px #cccccc solid; text-align:center; margin-right:30px; margin-bottom:30px; border-radius:5px; color:#333333;}
.btnlist a:hover { background:#e3e1e1; cursor:pointer; border:#9e9595 1px solid;}
</style></head>
<body>
<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
autoplay:'true',
width: '600',
height: '400',
vid: '138dcc96670a0728e2ddb6276128d93e_1',
});
//时间刷新
var interval=setInterval("render()",500);
function render(){var sec2=player.j2s_getCurrentTime();var sec3=player.j2s_getDuration();var sec4=player.j2s_realPlayVideoTime();document.getElementById("realPlayVideoTime").innerHTML="当前观看时间(不包含视频缓冲时间)是 <span style='color:#ff0000;'>"+sec4+"</span> 秒";document.getElementById("getCurrentTime").innerHTML="当前播放进度是 <span style='color:#ff0000;'>"+sec2+"</span> 秒";document.getElementById("duration").innerHTML="当前视频的时长是 <span style='color:#ff0000;'>"+sec3+"</span> 秒";
}
function play() {player.j2s_pauseVideo();
}
function getDuration() {console.log(player.j2s_getDuration());document.getElementById("totalTime").innerHTML = "输出当前播放时间:"+player.j2s_getDuration();
}
function getCurrentTime() {console.log(player.j2s_getCurrentTime());document.getElementById("times").innerHTML = "输出当前播放时间:"+player.j2s_getCurrentTime();
}
//设置音量
function setVolume(num) {player.j2s_setVolume(num);console.log("音量"+num)
}
//播放器事件
player.on('s2j_onPlayerInitOver',function(e) {console.log("播放器初始化完毕。")
});
player.on('s2j_onPlayOver',function(e) {console.log("视频播放完毕。")
});
player.on('s2j_onVideoPause',function(e) {console.log("视频播放已暂停。")
});
player.on('s2j_onVideoPlay',function(e) {console.log("视频正在播放。")
}); </script>
<div class="tit mt20"> 播放控制 </div>
<div class="btnlist">
<a class='btn' onclick="player.j2s_pauseVideo();" >暂停播放</a>
<a class='btn' onclick="player.j2s_resumeVideo();" >恢复播放</a>
<a class='btn' onclick="player.j2s_stopVideo();" >停止播放</a>
<a class='btn' onclick="player.toggleFullscreen();" >全屏</a>
</div>
<div class="tit"> Seek </div>
<div class="btnlist">
<a class='btn' onclick="player.j2s_seekVideo(20);" >seek(20秒)</a>
<a class='btn' onclick="player.j2s_seekVideo(60);" >seek(60秒)</a>
<a class='btn' onclick="player.j2s_seekVideo(80);" >seek(80秒)</a>
</div><div class="tit"> 获取视频时间: <span class="time22" id="times">Loading...</span> <span>| </span><span class="time22" id="totalTime">Loading...</span></div>
<span id="realPlayVideoTime">当前观看时间(不包含视频缓冲时间)是 0 秒</span><br>
<span id="getCurrentTime">当前播放进度是 0 秒</span><br />
<span id="duration">当前视频的时长是 0 秒</span><br />
<div class="btnlist">
<a class='btn' onclick="getCurrentTime();" >获取播放时间</a>
<a class='btn' onclick="getDuration();" >获取视频总时长</a></div><div class="tit"> 设置音量 </div>
<div class="btnlist">
<a class='btn' onclick="setVolume(0);" >静音</a>
<a class='btn' onclick="setVolume(0.2);" >音量(0.2)</a>
<a class='btn' onclick="setVolume(0.8);" >音量(0.8)</a>
<a class='btn' onclick="setVolume(1);" >音量(1)</a>
</div><div class="tit"> 销毁播放器</div>
<div class="btnlist clearfix">
<a class='btn' onclick="player.destroy();" >销毁播放器</a>
</div>
<footer class="clearfix">
<p>酷播云,企业视频应用专家 / 2009-2022(C)Powered www.CuPlayer.com / 极致播放体验 / 就用酷播云H5</p>
</footer></body>
</html>
[ 视频安全 ] 相关原创文章
- 教育教学类视频如何处理加密与安全(组图)
- 防止360浏览器小窗下载视频
- 视频安全之视频播放密码功能(设置观看密码功能教程)
- 视频安全之授权播放和防录屏跑马灯
- 企业级微信视频直播如何设定观看白名单(设定手机观看白名单、授权观看直播)
- 在线教育网站如何更好的实现视频安全视频保护?
- 免费视频二维码的完整使用教程(适合小企业做微信视频宣传)
- Html5视频video标签中使用blob实现视频播放加密
[ 视频直播 ] 相关原创文章
- 云直播客户端4.0活动拍摄类直播与教学培训类直播测试
- 视频直播画中画效果(边角叠加、去背景、并列布局三种效果)
- 做视频直播时如何测试本地网络的上行带宽(网速测试)
- 在线导播台(网页导播台)混流效果
- 云课堂直播功能介绍,更贴合在线教育、企业内训的场景应用
- 微信公众号直播有哪些不一样的玩法?
- 企业年会活动常用的音频类、视频类工具软件
播放器事件/与JS交互相关推荐
- 电脑端音乐播放器html5,原生js的音频播放器,兼容pc端和移动端(原创)
插件描述:基于原生的音频播放器效果,小巧易用 更新时间:2018/12/10 下午3:08:16 更新说明: 1. 更新demo的音频地址 2. 组件的图片地址使用本地base64的图片格式 更新时间 ...
- 小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/. ...
- 小型音乐播放器插件APlayer.js的简单使用例子 1
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...
- 雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...
- js html5 音乐播放器代码大全,js实现简单音乐播放器
本文实例为大家分享了js实现音乐播放器的具体代码,供大家参考,具体内容如下 效果图: 可播放暂停继续播放,进度条可拖动,时间展示,声音调节 完整代码(直接拿来用) audio功能开发 * { marg ...
- PHP制作音乐播放器制作教案,js制作简单的音乐播放器的示例代码
一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播 ...
- 酷播云H5播放器与JS之间交互的实例
酷播云H5播放器与JS之间交互的实例 <!doctype html> <html> <head> <meta charset="utf-8" ...
- 黄聪:原生js的音频播放器,兼容pc端和移动端(原创)
更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...
- 直播播放器API(播放器调用方法、参数、接口和事件)
直播播放器API(播放器调用方法.参数.接口和事件): 播放器调用方法 <div class="player"></div> <script src= ...
最新文章
- Oracle游标学习笔记
- 如何将String对象转换为Boolean对象?
- RuntimeError Assertion cur_target = 0 cur_target n_classes failed
- Ajax.net实现的动态输入项
- 如何基于k8s快速搭建TeamCity(YAML分享)
- linux7给用户授权,CentOS7 添加新用户并授权
- Linux-系统性能指标
- asp.net 运行原理
- puppet之判断和class
- winedt (latex 编译器)解决中文的问题(CJK CTEX)
- Java关系操作符简写
- Android计算器简单实现及代码分析
- 关于GPS数据跳动问题的解决方案
- JavaWeb 自制基础开发框架准备环境搭建
- 免费从IEEE xplore下载论文
- 域客户统一关闭UAC
- scratch少儿趣味编程之让小猫原地转圈
- 解决PHP上传文件时大小受限制问题
- 在无聊的时候玩小游戏
- Web测试如何让IT门外汉更好的入门篇