酷播云H5播放器与JS之间交互的实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>酷播云html5播放器JS交互</title>
<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>
<div class="back clearfix"><a href="http://www.cuplayer.com/html5player/?f=link-back" class="cGray">返回酷播云应用平台</a></div>
<footer class="clearfix">
<p>/ 2009-2022(C)Powered by 酷播云H5</p>
</footer>
</body>
</html>
我的热门文章推荐
- 多路视频直播用在线云导播切换的效果测试
- 如何把视频转换生成二维码,扫码直接播放?
- 有哪些网站上传视频是不会插入广告的?
- 怎么把视频生成二维码?微信扫二维码就可以观看?不要广告的
- 常用照片尺寸对照表,照片大小看这个表就对了
- 视频直播推流攻略(整理的各大平台推流界面)
- html5视频倍速播放功能
- 教你一招:多个视频如何实现列表播放?
- 微信公众号如何实现视频列表播放视频的功能
- h5视频倍速播放功能(视频多倍速观看功能的实例)
- 怎样配置FTP服务器
- 如何使用FTP上传文件(FTP文件传输)
- OBS直播工具使用指南/OBS推送直播视频源到服务器的工具
- QQ浏览器劫持video标签加载自己的广告(怎么解决?)
- 如何让自己网站播放企业视频去掉广告?mark一下
- 教您Win环境下快速配置FTP服务器(完整图文教程)
- html5-video标签做视频加密的方法