HTML5：视频控制

来源：互联网发布：电子琴入门教程软件编辑：程序博客网时间：2024/05/17 03:47

一：HTML5属性控制视频

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><video src="img/test.mp4" width="300px" height="200px" loop="3" autoplay="autoplay"controls="controls"></video></body></html>

属性解读

属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。pixelspixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。
二：DOM属性控制视频

<span style="font-size:14px;"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div style="text-align: center;"><button onclick="playPause()">播放</button><button onclick="makeBig()">放大</button><button onclick="makeNormal()">原样</button><button onclick="makeSmall()">变小</button><br/><video id="viedo1" width="420px" style="margin-top: 15px;"><source src="img/test.mp4" type="video/mp4"/></video></div><script type="text/javascript">var myViedo = document.getElementById('viedo1');function playPause(){if(myViedo.paused)myViedo.play();}function makeBig(){myViedo.width=560;}function makeNormal(){myViedo.width=420;}function makeSmall(){myViedo.width=320;}</script></body></html></span>

0 0