javascript - 使用Jquery恢复视频(Html5视频元素)

标签 javascript jquery html html5-video

我正在使用视频 html5 元素来获取持续时间属性以查找最后一次 当用户关闭浏览器或用户暂停时视频停止播放,将其发送到数据库,以便稍后从停止的地方恢复。

目前我用谷歌搜索并检查堆栈溢出的内容是这样的

    <script type="text/javascript">

    $("#video").on("durationchange", function() {
         alert("Current duration is: " + this.duration);
     }); 

  </script>

 <video id="video" poster="image.jpg" controls>     
      <source src="video_path.mp4" type="video/mp4" />
  </video>

我还想查找视频到用户登录后停止的持续时间 到我的应用程序。我尝试过,但不是正确的做法

       $(window).load(function() {
       .ajax({
            type: "GET",
            url: "/api/videoResume/",
            data: param = "",
            contentType: "application/json; charset=utf-8",
            dataType: "json"              
        })
        .done(function(result){
           //update the video element duration 
           //seeking video to the duration
        })
   });

最佳答案

另一种方法是添加一个事件监听器,这样当视频暂停时,您可以捕获当前时间,然后您可以将该信息发送到数据库,而不是像下面的示例那样发送警报等等。代码如下所示:

Javascript:

var video1 = document.getElementById('video1');

function videoPausePlayHandler(e) {
    if (e.type == 'pause') {
   alert(video1.currentTime);
    }
}

video1.addEventListener('pause', videoPausePlayHandler, false);

HTML:

<video id="video1" poster="image_path.jpg" controls>
<source src="video_path.mp4" type="video/mp4" />
</video>

工作示例:https://jsfiddle.net/l33tstealth/qr72bvxb/1/

关于javascript - 使用Jquery恢复视频(Html5视频元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43384404/

相关文章:

javascript - Angular JS 计数器

html - 链接在 HTML 页面中的可点击框网格内不起作用

javascript - 使用 jQuery 拖动对象

javascript - 验证 Node 应用失败

javascript - Angular 2 - 延迟加载模块的生命周期 Hook

javascript - 我可以使用纯 JS 将任意音频转换为 FLAC 吗?

javascript - 如何对所有下一个可见表行执行条件检查?

jquery - 在 div 的高度上触发 CSS 动画

jquery - 无法在简单的 jquery 插件中调用函数

html - animate.css 仅在添加 "infinite"时有效