js获取播放器播放时间和停止播放

html代码

1   <video id="myVideo"  class="video-active" width="100%" height="300" controls="controls" >
2                 <source src="__STATIC__/video/videos/1.课程介绍.mp4" type="video/mp4" style="margin-top: 0px;;">
3                 <source src="__STATIC__/video/videos/1.课程介绍.mp4" type="video/ogg">
4   </video>

1、使用jquery写的代码段：

<script>$(document).ready(function() {$times = 10;new_times = 0;$("#video-active").on("timeupdate",function(event) {onTrackedVideoFrame(this.currentTime, this.duration);});})/*** * @param {Object} currentTime 视频播放的时间* @param {Object} duration 视频的总播放时间*/function onTrackedVideoFrame(currentTime, duration) {if(currentTime > $times) {new_times = currentTime;Media = document.getElementById('video-active');Media.pause();layer.confirm('你未购买本视频', {btn: ['马上购习', '稍后购买'] //按钮}, function() {layer.msg('正在开发中，请等待', {icon: 1});}, function() {layer.closeAll();return false;});}}
</script>

2、使用javascript原生态代码(第一种)：

<script type="text/javascript">// 获取 id="myVideo" 的 video 元素vid = document.getElementById("myVideo");
//    // 为 video 元素添加 ontimeupdate 事件，如果当前播放位置改变则执行函数vid.ontimeupdate = function(){var curTime = vid.currentTime;console.log(curTime);if (curTime >= 20) {vid.pause();alert("请购买本视频后再观看！");return false;}};

3、使用javascript原生态代码(第二种)：

   vid = document.getElementById("myVideo");
////    videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);vid.addEventListener("timeupdate",function(){var curTime = vid.currentTime;if (curTime >= 20) {vid.pause();alert("请购买本视频后再观看");return false;}})

特别说明：

1、使用javascript共有两种的方法;主要区是有些浏览器不能直接使用timeupdate,只能使用addEvetListener

2、公众号开发视频时，js控制的视频要放在<video><video>下面; 要不然不能执行timeupdate;

转载于:https://www.cnblogs.com/li7671269/p/9518742.html

js获取播放器播放时间和停止播放相关推荐

EasyPlayer播放H.265视频，播放器快照时间显示的问题优化
我们的EasyPlayer流媒体播放器可支持H.264与H.265,能支持RTSP.RTMP.HLS.FLV.WebRTC等格式的视频流播放.TSINGSEE的视频平台均集成了EasyPlayer的播 ...
html制作在线视频音乐播放器,用html5制作音乐播放器，这3款就足够了！
用HTML5结合Jquery做一个简易版的音乐播放器代码展示: 三生草 var sum = 1; function ssss(a) { var s = document.getElementById ...
播放器设计要求：实现播放、循环播放、暂停、快进、下一首、打开选择功能
<软件开发工具>实验一.实验内容实验1:写字板设计要求:实现字体颜色.大小更改:实现查找.替换功能例图如下: 实验2:画图工具设计要求:实现画笔粗细.颜色选择 ...
使用Vitamio打造自己的Android万能播放器（5）——在线播放（播放优酷视频）
前言为了保证每周一篇的进度,又由于Vitamio新版本没有发布, 决定推迟本地播放的一些功能(截图.视频时间.尺寸等),跳过直接写在线播放部分的章节.从Vitamio的介绍可以看得出,其支持http ...
Android 中封装优雅的 MediaPlayer 音频播放器，支持多个播放器
Android 中封装优雅的 MediaPlayer 音频播放器,支持多个播放器实例的示例: public class AudioPlayer implements MediaPlayer.OnPre ...
使用Vitamio打造自己的Android万能播放器（7）——在线播放（下载视频）
前言本章将实现非常实用的功能--下载在线视频.涉及到多线程.线程更新UI等技术,还需思考产品的设计,如何将新加的功能更好的融入到现有的产品中,并不是简单的加一个界面就行了,欢迎大家交流产品设计和技术 ...
仿网易云音乐html代码,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
简要教程 APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插 ...
html5自动播放音乐外链,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插件. 安装 ...
Android调用uc播放器,android 视频播放 -- 调用系统播放器
android 视频播放,视频来源有两种:一种是本地视频,一种是网络视频,对android播放来说都统一用uri来表示. 播放视频有三种处理方式: (1) 使用webview 播放 (2) 使用vid ...
基于android的音乐播放器毕业设计,基于android音乐播放器的毕业设计ppt
<基于android音乐播放器的毕业设计ppt>由会员分享,可在线阅读,更多相关<基于android音乐播放器的毕业设计ppt(29页珍藏版)>请在人人文库网上搜索. 1.1. ...

js获取播放器播放时间和停止播放

js获取播放器播放时间和停止播放相关推荐

最新文章

热门文章