Javascript - 观看视频后更改 CSS

如何解决Javascript - 观看视频后更改 CSS

Javascript 可以检测网页上的完整视频吗？ 我们想在首次加载时运行视频（宽度和高度为 100vh）。观看此视频后，我们网页的 CSS 必须更改（.videoBox 可见性隐藏；.pagecontent 可访问性可见；）。

有什么解决办法吗？

解决方法

您可以使用 'ended' 事件侦听器检测 HTML5 何时完成播放，并在那里更新 CSS：

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

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // Video has finished playing!
        // To update the CSS in your question,// select the proper elements through their class
        // and change their style.
        document.getElementsByClassName('videobox')[0].style.visibility = 'hidden';
        document.getElementsByClassName('pagecontent')[0].style.visibility = 'visible';
    }
</script>

如果您在实施我的解决方案时遇到任何问题或疑问，请在评论中告诉我。