上一篇博客呢，叫大家视频如何实现暂停播放还有播放效果，这一篇博客教大家如何实现放大缩小的一个效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div style="text-align:center"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">放大</button> <button onclick="makeSmall()">缩小</button> <button onclick="makeNormal()">普通</button> <br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video> </div> <script> var myVideo=document.getElementById("video1"); function makeBig() { myVideo.width=560; } //放大事件 function makeSmall() { myVideo.width=320; } //缩小事件 function makeNormal() { myVideo.width=420; } //普通大小事件 </script> </body> </html>
当然呢你要是想实现视频一直循环播放的效果,就请接着往下看吧~
自动播放以及循环播放的代码
<video muted autoplay="autoplay" loop="loop"> <source src="image/01.mp4" type="video/mp4"></source> </video> <!--muted：静音播放 注：高版本浏览器对视频静音后可以保证视频自动播放--> <!--autoplay：自动播放--> <!--loop：循环播放-->
source：
为媒介元素(如 video 和 audio)定义媒介资源
允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或编解码器的支持进行选择(可实现让媒体元素在不同浏览器下都支持播放)
是HTML5中的新标签
muted：
属性是一个boolean(布尔)属性
设置或返回音频/视频是否应该被静音(关闭声音)
video：
用来定义视频，比如电影片段或者其他视频流
HTML5中的新标签
可以在开始标签和结束标签之间放置文本内容，这样老版本浏览器可以显示出信息
属性
希望对大家有帮助哦~
