今天小编跟大家讲解下有关HTML5使用DOM进行自定义控制示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5使用DOM进行自定义控制示例代码 的相关资料，希望小伙伴们看了有所帮助。
HTML5的video虽然可用controls来展示控件 并进行控制播放暂停等 但是不同的浏览器显示的效果可能不一样 所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。 当然效果不是很美观 若想好看的可以自己设置css样式等。 复制代码代码如下: <div id="video_div"style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="toBig()">大</button> <button onclick="tonormal()">中</button> <button onclick="toSmall()">小</button> <video id="myVideo"width="500"height="250"style="margin-top:15px;"> <source src="https://www.aidi.net.cn//html5/demo.mp4"type="video/mp4"/> <source src="https://www.aidi.net.cn//html5/demo.ogg"type="video/ogg"/> 您的浏览器不支持此HTML5 视频标签。 </video> </div> 复制代码代码如下: <script type="text/javascript"> var myVideo=document.getElementById("myVideo"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function toBig() { myVideo.width=560; } function tonormal() { myVideo.width=420; } function toSmall() { myVideo.width=320; } </script> 需要注意的是在所有属性中 只有 videoWidth 和 videoHeight 属性是立即可用的。 在视频的元数据已加载后 其他属性才可用。来源：爱蒂网
