如何解决视频播放结束后更改div元素的内容
我想知道是否有可能:
在我的函数中使用哪些选项:
<video src="video.com" id="myVideo">
</video>
<div class="images">
<img scr="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
const img = document.querySelector("img")
const video = document.querySelector("video")
function myHandler(e) {
// Now the video has to hide,and show the img:
video.style.display = "none:
img.style.display = "block"
}
</script>
解决方法
有多种选择,包括将2M
标签替换为<video>
标签。
我想到的最简单的方法是将图像放置在视频的 下面的一层,然后在视频播放完毕后,您可以更改图层(将图像放在最前面,现在将视频放到底层)。
当图像位于视频下方时,它具有相同的尺寸和位置,因此对于最终用户而言,它是不可见的。
通过<image>
部分进行设置,其中<style=>
是图层位置(较高的数字将其置于较低数字的其他位置之上)。 z-index
和top
选项是上/下和左/右设置的位置。
您可以尝试使用:
(在下面的代码中,我更改了它们的位置(未对齐),以便可以看到正在发生的事情)...
left
,
除了在不播放视频时仅显示图像外,我不确定是否还有其他东西,如果不是这样,video
标签具有poster属性:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。