HTML中,怎么让视频在没有播放的时候显示视频的缩略图?

HTML中,怎么让视频在没有播放的时候显示视频的缩略图?,第1张

使用video标签的poster属性,下面显示的是aa.gif这个图片作为缩略图

<video controls poster="/images/aa.gif">

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

您的浏览器不能使用最新的视频播放方式呢

</video>

网页中插入点视频开始显示图片,可以利用js代码来实现点击图片显示视频。具体代码如下:

<style>

.pic{clear:bothwidth:410pxheight:240px}/*图片区域*/

.pic img{width:410pxheight:240px}/*图片宽度和高度,可自行修改*/

.play{clear:bothwidth:410pxheight:240pxdisplay:none}/*视频区域-最初先设为隐藏*/

</style>

<div id="pic"><a href="JavaScript:vide()"><img src="图片.jpg"</a></div>

<div id="play"><embed src="视频文件.mp4" width="410" height="240" autostart="false"></embed></div>

<script>

function $(v){return document.getElementById(v)}

function view(id){$(id).style.display = "block"}

function hide(id){$(id).style.display = "none"}

function vide(){//点击图片显示视频

hide("pic")view("play")

}

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7009989.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存