html5播放器JS交互（示例）

 

<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>

我的视频应用类原创文章

• 酷播云免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 
• 视频二维码的适用场景
• 微信公众号直播有哪些不一样的玩法？
• 微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
• 说说视频编码格式、视频码率、视频帧率、分辨率的概念
• 原创教程：带ppt课件和讲师画面的教学视频录制完整教程
• 如何做电视节目的视频直播（电视台节目直播）
• 做视频直播时如何测试本地网络的上行带宽(网速测试)
• usb摄像头做教学直播实现pc和手机都可以在线观看教程
• 微信公众号直播有哪些不一样的玩法？
• 微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
• 说说视频编码格式、视频码率、视频帧率、分辨率的概念
• 原创教程：带ppt课件和讲师画面的教学视频录制完整教程
• 如何做电视节目的视频直播（电视台节目直播）
• 做视频直播时如何测试本地网络的上行带宽(网速测试)
• usb摄像头做教学直播实现pc和手机都可以在线观看教程
• 微信公众号直播有哪些不一样的玩法？
• 如何做电脑游戏桌面录屏直播实现手机直接观看
• 免费视频存储平台（微云、百度网盘、谷歌硬盘、酷播云）的截图对比
• 云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
• 基于微信小程序做直播的截图（微信小程序发起视频直播）
• 在线教学场景下 讲师们做PPT课件直播的一些介绍
• FMS/wowza/red5/SRS流媒体服务器产品对比