Question

我的网页上有一个HTML5视频元素，我想为视频创建一个自定义时间轴控件。但是，当我寻求视频结束时，我遇到了问题。当我尝试向后搜索时，视频不会改变（但是自动收报机仍在移动）。调用“播放”方法也没有任何作用。唯一可行的方法是“currentTime”和“ends”属性，它们仍然可以正确更新。

以下是我的视频和自动收录器的HTML布局（“块”表的z-index为1000，位于自动收报机下方，因此不会干扰它）：

<div id="player">
<video width="500">
    <source src="Tutorial 1.mp4" type="video/mp4">
</video>
<ul>
    <li id="play_pause" title=""><img src="control.png"></img></li>
    <li id="volume" title=""><img src="speaker_volume.png"></img></li>
    <li id="split" title=""><img src="scissors_plus.png"></img></li>
    <li id="merge" title=""><img src="film_minus.png"></img></li>
</ul>
<div id="timecode" class="modtime"><img src="mark_time.png"></img><div></div></div>
</div>
...
<div id="timeline">
<table id="blocks" width="100%" cellspacing="0" cellpadding="0" border="0" class="CRZ">
    <tbody>
        <tr>
            <td style="width: 800px;"></td>
        </tr>
    </tbody>
</table>
<div id="ticker"></div>
</div>

这里是“ticker”和“timeline”元素的CSS：

#timeline {
float: left;
width: 850px;
height: 30px;
background: lightblue;
margin-left: 25px;
border: 1px solid black;
border-radius: 2px;
}

#ticker {
height: inherit;
width: 1px;
background: red;
z-index: 3000;
position: relative;
left: 0px;
cursor: col-resize;
opacity: 1;
}

我使用Jquery UI创建了“ticker”元素，可以在拖动过程中创建一个事件处理程序来更新视频“currentTime”属性。 “timecode”元素在MM：SS.SS中显示“currentTime”元素。在寻求结束之后，这仍然有用。

$("#ticker").draggable({ containment: "parent", axis: "x", cursor: "col-resize", grid: [ 1, 1 ], drag: function( event, ui ) { 
$("#stage2 video").prop("currentTime", ((ui.position.left - 1) * $("#stage2 video").prop("duration")) / ($("#timeline").width() - 2));
$("#timecode div").text(sec2smpte($("#stage2 video").prop("currentTime")));
}});

我还编写了在播放视频时移动的自动收录器（通过在单击按钮时简单地调用“播放”方法来控制）。无论视频是否播放，行为都很明显：

$("#stage2 video").on("timeupdate", function() {
$("#ticker").css("left", ($("#timeline").width() * $("#stage2 video").prop("currentTime")) / $("#stage2 video").prop("duration")  + "px");
$("#timecode div").text(sec2smpte($("#stage2 video").prop("currentTime")));
});

$("#play_pause").click(function() {

if ($("#play_pause img").attr("src") == "control.png")
{
    $("#play_pause img").attr("src", "control_pause.png");
    $("#stage2 video").trigger("play");
}
else
{
    $("#play_pause img").attr("src", "control.png");
    $("#stage2 video").trigger("pause");
}
});

更新：我通过FFmpeg运行了我的源视频，这似乎解决了这个问题。这似乎是一些.mp4文件的搜索问题。我还注意到，如果它试图向后搜索它会表现出类似的行为。

HTML5视频寻求结束导致冻结

0 个答案: