播放器事件/与JS交互

阿酷tony

已于 2022-08-23 16:48:44 修改

阅读量397

点赞数

分类专栏：酷播云（免费云存储） html5 文章标签：音视频 html5播放器视频播放器视频

于 2022-08-23 16:44:48 首次发布

本文链接：https://blog.csdn.net/ffffffff8/article/details/126488077

版权

html5 同时被 2 个专栏收录

144 篇文章 6 订阅

订阅专栏

酷播云（免费云存储）

52 篇文章 2 订阅

订阅专栏

播放器事件：

名称	说明
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>