Question

我需要在HTML视频结束后显示div的内容。我看到这篇文章是一个开头，但我对实际功能感到失望： Detect when an HTML5 video finishes

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // need to show a hidden div!
    }
</script>

Answer 1

您可以在加载页面时按ID隐藏div，并在视频结束时再次显示。

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<div id="divId">
    Hello world!
</div>

<script type='text/javascript'>
    $(document).ready(function() {
        $("#divId").hide();
    });

    document.getElementById('myVideo').addEventListener('ended',myHandler,false);

    function myHandler(e) {
        $("#divId").show();
    }
</script>

Answer 2

这应该可以解决问题......我使用了“classes”和“ids”这个例子，因为我没有完整的源代码。

// CODE

<!DOCTYPE html>
<html>
<head>
<style>
.div-hide{
    display: none;
}
</style>
<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);

    function myHandler(e){
        var div = document.getElementById("selectme");
        div.classList.remove("div-hide");
        div.innerHTML = "I'm showing";
    }
</script>
</head>
<body>
    <video src="video.ogv" id="myVideo">
      video not supported
    </video>
    <div id="selectme" class="div-hide">I'm Hidden</div>
</body>
</html>

当HTML视频结束时，javascript显示div

2 个答案: