酷播云H5播放器与JS之间交互的实例
2024-06-30 04:01:44
酷播云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标签做视频加密的方法
我的视频类文章推荐
- 如何让自己网站播放企业视频去掉广告？mark一下（支持上传、自动转码、存储、播放功能）
- 网页代码酷播v4.0调用mp4文件的范例完整版（须自己处理视频）
- 企业宣传片如何快速接入微信公众号中？
- 视频二维码应用教程与使用指南
- 一键实现视频二维码分享功能，So easy！
- 如何把视频转换生成二维码，扫码直接播放？
- h5视频倍速播放功能(视频多倍速观看功能的实例)
- QQ浏览器劫持video标签加载自己的广告（怎么解决？）
酷播云H5播放器与JS之间交互的实例相关推荐
- 酷播云H5播放器倍速播放功能
大家好,我是小酷,小酷今天来说说H5播放器倍速播放功能: 酷播云是支持HTML5播放器及Flash播放器,两者兼容,可自由切换.其中,H5播放器自带倍速播放功能,用户可选择视频的播放速度. 酷播云Ht ...
- 酷播云H5播放器自动播放与循环播放
说明:html5的自动播放与循环播放,各浏览器的支持并不一致,存在部分浏览器不支持的情况. <div id="player"></div> <scri ...
- 网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布，支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
- 支持H.265网页播放的H5播放器EasyPlayer.js发布了
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
- 酷播云获取播放视频地址方法实例教程
原始首发文章 20191203 图示中二维码已用色块屏蔽 酷播云视频应用提供四种调用方式:视频代码.视频链接.视频二维码.视频API/SDK 酷播云提供多种不同的应用方式,主要有通过 视频播放代码 ...
- 阿里视频云web播放器常见问题汇总
1. 如何正确选择播放器 Aliplayer播放器包含H5.Flash.自适应播放器,建议用户选择自适应播放器,可以根据终端类型.浏览器类型和地址协议选择最合适的播放器. 如果是加密播放只能选择Fla ...
- Html5酷播云视频播放器同层播放(代码实例)
在Android手机上使用H5播放视频时,大多数的国内浏览器厂商都会在视频播放时劫持<video>标签,使用浏览器自带的播放器播放视频,而且播放器会处于最高层级,视频上面无法显示其它htm ...
- 暴风酷播云二期配置_暴风酷播云N3160版硬件折解及安装Proxmox VE-服务器虚拟化系统教程...
暴风酷播云N3160版硬件折解及安装Proxmox VE-服务器虚拟化系统教程% @% g* x; }( _; n- o; x " J/ @/ e [ E) T3 s0 ]! E; B ...
- SkeyeWebPlayer.js H5播放器是怎么样炼成的
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
最新文章
- 基于Hadoop的58同城离线计算平台设计与实践
- 使用GPG校验sign签名
- ICCV 2019 《Robust Change Captioning》论文笔记（数据集）
- restful json_Dropwizard：轻松的RESTful JSON HTTP Web服务
- matlab lti全响应,《LTI系统的响应——实验报告》.doc
- 【高效能人士的七个习惯】 第二部分 个人的成功：从依赖到独立（史蒂芬·柯维）...
- Client端异步Callback的应用与介绍
- 幕享 for Mac(全平台全设备投屏共享软件)中文版
- 【备用】SQL SERVER存储过程执行速度慢的问题
- 基础平台系列-1-第三方服务
- css音乐播放器插件,jQuery MPlayer音乐播放器插件
- asp.net使用MailMessage发送邮件的方法
- SOCK_NONBLOCK，accept4 阻塞与非阻塞SOCKET
- postgresql unsupported frontend protocol 1234.5680问题
- 「Adobe国际认证」关于Photoshop选择并遮住工作区，用户界面介绍
- 艾美捷人重组MEGACD40L蛋白（可溶性）实例展示
- 如何生成带标高的西安80坐标系等高线
- UART/USRAT协议
- 【计算机网络】应用层 : FTP 文件传输协议 ( FTP 客户端 和 服务器 | FTP 工作原理 | FTP 传输模式 )
- unity android x86,Unity3d面向英特尔 x86 平台的 Unity* 优化指南： 第 4 部分