Question

我有一个包含视频和按钮的页面，但是我不希望用户在视频结束之前单击完成。

视频代码：

<video width="100%" height="480" controls>
    <source src="video/lesson4.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

完成按钮的代码：

<form method="POST" action="week.php">
    <div class="input-group">
        <button type="submit" class="btn" id="btn" name="register_btn" disabled="disabled"><h6>FINISH</h6></button>
    </div>
</form>

Answer 1

您应该听“结束”事件，就像这样：

var video = document.getElementById("myVideo");
var button = document.getElementById("myButton")
video.addEventListener("ended", function() {
   button.disabled = false;
}, true);

查看媒体事件here

Answer 2

您可以这样做：

JavaScript

var element = document.getElementById('video_id');

element.onended = function() {
     document.getElementById('btn').disabled = false;
};

jQuery

$("video").on("ended", function (e) {
    $('#btn').prop('disabled', false);
});

与事件播放和暂停相同。

有关更多事件，您可以参考以下内容：https://www.w3.org/2010/05/video/mediaevents.html

Answer 3

您可以添加事件监听器像这样：

<video width="100%" height="480" controls>
<source src="video/lesson4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="btn" name="register_btn"  class=“enableIfFinish”
disabled="disabled"><h6>FINISH</h6></button>
</div>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        $(‘.enableIfFinished’).prop(‘disabled’,false);
    }
</script>

别忘了包括jquery库

Answer 4

以下是有效示例

document.getElementById('someID').addEventListener('ended',videoEndHandler,false);
function videoEndHandler(e) {
   document.getElementById("myBtn").disabled = false;
}

<video id="someID" width="100%" height="480" controls>
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
<form method="POST" action="week.php">
    <div class="input-group">
        <button type="submit" class="btn" id="myBtn" name="register_btn" disabled="disabled"><h6>FINISH</h6></button>
    </div>
</form>

视频播放结束后如何启用按钮？

4 个答案: