获取当前视频时间onclick和echo值到div

时间:2018-05-02 01:17:20

标签: javascript jquery html forms video

我的页面上有一个视频,当我点击某个div时,我希望以数字显示当前播放时间。然后该值将回显到另一个div。

这是我的脚本 -

$(document).ready(function(){
  $("#video-preview").on(
    "timeupdate", 
    function(event){
      onTrackedVideoFrame(this.currentTime, this.duration);
    });

});

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime); //Change #current to currentTime
    $("#duration").text(duration);
    $ctime = $("#current").text(currentTime);
}

 $(function() {
        $('#pt1').click(function() {
            var value = $("#current").text;
            var input = $('#pic-time1');
            input.val(input.val() + value + ', ');
            return false;
        });
    });

相关的div -

<div id="current">0:00</div>
<div id="duration">0:00</div>
<div id="pt-1-clic"><a id="pt1">SET THIS TIME FOR PICTURE 1</a></div>

.....
<input type="text" name="pic-time1" id="pic-time1" class="" value="" />
.....

到目前为止,我几乎已经开始工作,但价值却没有正确显示 -

...function (a){return J(this,function(a){return void 0===a.....

我错过了什么?

1 个答案:

答案 0 :(得分:0)

我设法让这个小提琴的帮助 -

fiddle

使用下面的html和脚本,我可以在单击按钮或链接时回显div或输入字段中的值 -

  <video id="home_explainer_placeholder" class="video_placeholder" controls>
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
  </video>

    <div>Current Time : <span  id="currentTime">0</span></div>
    <div>Total time : <span id="totalTime">0</span></div>
    <div> Remaining: <span id="remainingTime">0</span></div>
    <input id="recordtime" type="text" />
    <input type="button">
    <div id="recordtime2">
    0
    </div>
    <a id="click">Echo time in div</a>

<强>脚本

    $(function(){
        $("#home_explainer_placeholder").on(
            "timeupdate", 
            function(event){
              onTrackedVideoFrame(this.currentTime, this.duration);
            });
    });


    function onTrackedVideoFrame(currentTime, duration){
        $("#currentTime").text(currentTime);
        $("#totalTime").text(duration);
        $("#remainingTime").text(duration-currentTime);

        // Button click
        $('input:button').click(function () {
        $("#recordtime").val(currentTime);
    });

     // Link click
     $('#click').click(function () {     
        $("#recordtime2").text(currentTime);
    });

    }