Question

我试图在播放视频时显示当前持续时间（实时打印当前时间）。

我确实在Detect if HTML5 Video element is playing上读过Kurt Van den Branden的答案，但无济于事

我最终希望将当前时间值传递给php变量$ currenttime 下面是我目前的代码

<html> 
<head>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head> 
<body >
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
    <source src="http://action.news/videos/Britney%20Spears%20-%20Overprotected%20(2009)%20Full%20HD%201080p_60%20fps.mp4" type="video/mp4">
</video>

<script>
    var media = document.getElementById('myVideo');

    // Playing event
    var isPlaying = function(e) {
    #$("#output").html("Playing event triggered");

    };

      // durationchange
    var isdurationchange = function(e) {
        $("#output").html(vid.currentTime);


    };

    media.addEventListener("playing", isPlaying, false);   
    media.addEventListener("durationchange", isdurationchange, true);    
</script>   
</body> 
</html>

Answer 1

倾听事件timeupdate而不是durationchange （也正如@Jeto在评论中提到的那样纠正你的拼写错误）

var media = document.getElementById('myVideo');

    // Playing event
    var isPlaying = function(e) {
    $("#output").html("Playing event triggered");

    };

      // durationchange
    var isdurationchange = function(e) {
        $("#output").html(media.currentTime);
    };

    media.addEventListener("playing", isPlaying, false);   
 //   media.addEventListener("durationchange", isdurationchange, true);   
 
  media.addEventListener("timeupdate", isdurationchange, true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
    <source src="http://fiber.westnet.ca:81/videos/Britney%20Spears%20-%20Overprotected.mp4" type="video/mp4">
</video>

Answer 2

你应该能够像这样进行，专业人士会用语法帮助你

 document.write("<a href=/time.htm?currentTime='.media.addEventListener("timeupdate", isdurationchange, true).'>link</a>;);

HTML5视频获取currentTime不使用媒体事件javscript addEventListener

2 个答案: