• 播放器事件/与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播放出现错误时触发。
    HTML5LoadFlash切换至H5播放器时触发。
    flashLoadPC端H5播放器切换至Flash播放器时触发。
    serverError发生业务逻辑错误时触发，比如授权验证失败、域名黑白名单验证不通过等错误。参数返回事件名称和错误代码。
    onChangeMode音视频模式切换时触发，，切换后模式以及切换前模式。
    onFullscreenProxy当设置fullscreenProxy参数为true时，点击全屏按钮不会调用全屏api，会触发 window.onFullscreenProxy(vid, toFullscreen) 事件，调用者自行做全屏处理，适合在全屏状态下叠加用户自定义的元素。
    onFullPageScreen当设置full_page_screen为true时，点击网页全屏按钮会触发window.onFullPageScreen(vid, currentStatus) 事件，调用者自行做网页全屏处理。

    JS交互代码实例：

    1.  
    2. <!doctype html>
    3. <html>
    4. <head>
    5. <meta charset="utf-8">
    6. <title>html5播放器JS交互,酷播云</title>
    7. <meta name="keywords" content="html5播放器实例">
    8. <meta name="description" content="html5播放器调用实例效果展示">
    9. <link rel="stylesheet" type="text/css" href="../css/common.css" />
    10. <style type="text/css">
    11. .mt20 {margin-top:20px;}
    12. .tit { clear:both; font-weight:bold;height:40px; line-height:40px;  }
    13. .tit span { font-weight:normal; font-size:12px; }
    14. .btnlist { line-height:40px; }
    15. .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;}
    16. .btnlist a:hover { background:#e3e1e1; cursor:pointer; border:#9e9595 1px solid;}
    17. </style>
    18.  
    19. </head>
    20. <body>
    21. <div id="player"></div>
    22. <script src="//player.polyv.net/script/player.js"></script>
    23. <script>
    24. var player = polyvPlayer({
    25. wrap: '#player',
    26. autoplay:'true',
    27. width: '600',
    28. height: '400',
    29. vid: '138dcc96670a0728e2ddb6276128d93e_1',
    30. });
    31. //时间刷新
    32. var interval=setInterval("render()",500);
    33. function render(){
    34. 	var sec2=player.j2s_getCurrentTime();
    35. 	var sec3=player.j2s_getDuration();
    36. 	var sec4=player.j2s_realPlayVideoTime();
    37. 	document.getElementById("realPlayVideoTime").innerHTML="当前观看时间（不包含视频缓冲时间）是 "+sec4+" 秒";
    38. 	document.getElementById("getCurrentTime").innerHTML="当前播放进度是 "+sec2+" 秒";
    39. 	document.getElementById("duration").innerHTML="当前视频的时长是 "+sec3+" 秒";
    40. }
    41. function play() {
    42. 	player.j2s_pauseVideo();
    43. }
    44. function getDuration() {
    45. 	console.log(player.j2s_getDuration());
    46. 	document.getElementById("totalTime").innerHTML = "输出当前播放时间："+player.j2s_getDuration();
    47. }
    48. function getCurrentTime() {
    49. 	console.log(player.j2s_getCurrentTime());
    50. 	document.getElementById("times").innerHTML = "输出当前播放时间："+player.j2s_getCurrentTime();
    51. }
    52. //设置音量
    53. function setVolume(num) {
    54. 	player.j2s_setVolume(num);
    55. 	console.log("音量"+num)
    56. }
    57. //播放器事件
    58. player.on('s2j_onPlayerInitOver',function(e) {
    59. 	console.log("播放器初始化完毕。")
    60. });  
    61. player.on('s2j_onPlayOver',function(e) {
    62. 	console.log("视频播放完毕。")
    63. }); 
    64. player.on('s2j_onVideoPause',function(e) {
    65. 	console.log("视频播放已暂停。")
    66. }); 
    67. player.on('s2j_onVideoPlay',function(e) {
    68. 	console.log("视频正在播放。")
    69. }); 
    70.  
    71.  
    72. </script>
    73. <div class="tit mt20"> 播放控制 </div>
    74. <div class="btnlist">
    75. <a class='btn' onclick="player.j2s_pauseVideo();" >暂停播放</a>
    76. <a class='btn' onclick="player.j2s_resumeVideo();" >恢复播放</a>
    77. <a class='btn' onclick="player.j2s_stopVideo();" >停止播放</a>
    78. <a class='btn' onclick="player.toggleFullscreen();" >全屏</a>
    79. </div>
    80. <div class="tit"> Seek </div>
    81. <div class="btnlist">
    82. <a class='btn' onclick="player.j2s_seekVideo(20);" >seek(20秒)</a>
    83. <a class='btn' onclick="player.j2s_seekVideo(60);" >seek(60秒)</a>
    84. <a class='btn' onclick="player.j2s_seekVideo(80);" >seek(80秒)</a>
    85. </div>
    86.  
    87. <div class="tit"> 获取视频时间： <span class="time22" id="times">Loading...</span> <span>| </span><span class="time22" id="totalTime">Loading...</span></div>
    88. <span id="realPlayVideoTime">当前观看时间（不包含视频缓冲时间）是 0 秒</span><br>
    89. <span id="getCurrentTime">当前播放进度是 0 秒</span><br />
    90. <span id="duration">当前视频的时长是 0 秒</span><br />
    91. <div class="btnlist">
    92. <a class='btn' onclick="getCurrentTime();" >获取播放时间</a>
    93. <a class='btn' onclick="getDuration();" >获取视频总时长</a>
    94.  
    95. </div>
    96.  
    97. <div class="tit"> 设置音量 </div>
    98. <div class="btnlist">
    99. <a class='btn' onclick="setVolume(0);" >静音</a>
    100. <a class='btn' onclick="setVolume(0.2);" >音量(0.2)</a>
    101. <a class='btn' onclick="setVolume(0.8);" >音量(0.8)</a>
    102. <a class='btn' onclick="setVolume(1);" >音量(1)</a>
    103. </div>
    104.  
    105.  
    106. <div class="tit"> 销毁播放器</div>
    107. <div class="btnlist clearfix">
    108. <a class='btn' onclick="player.destroy();" >销毁播放器</a>
    109. </div>
    110. <footer class="clearfix"> 
    111. <p>酷播云，企业视频应用专家 / 2009-2022(C)Powered www.CuPlayer.com / 极致播放体验 / 就用酷播云H5</p>
    112. </footer>
    113.  
    114. </body>
    115. </html>

      [ 视频安全 ] 相关原创文章

    [ 视频直播 ] 相关原创文章

  • 相关阅读:
    QUIC协议
    Git学习
    Hive分组排序取topN的sql查询示例
    李迟2022年11月工作生活总结
    电影《前任4：英年早婚》观后感
    python reportlab 生成多页pdf
    离散数学--连通性和矩阵
    ROS2——通信接口（十）
    1.static 与 automatic 的“是与非”
    【Vue】Setup 函数的使用
  • 原文地址：https://blog.csdn.net/ffffffff8/article/details/126488077