本文摘自PHP中文网,作者黄舟,侵删。
HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,下面与大家分享下使用Dom来进行自定义的一些操作和控制HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。
当然效果不是很美观,若想好看的可以自己设置css样式等。
1 2 3 4 5 6 7 8 9 10 11 12 | < 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 = "demo.mp4" type = "video/mp4" />
< source src = "demo.ogg" type = "video/ogg" />
您的浏览器不支持此HTML5 视频标签。
</ video >
</ div >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < 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 属性是立即可用的。
在视频的元数据已加载后,其他属性才可用。
以上就是详解HTML5使用DOM进行自定义控制示例代码的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5缓存机制是什么?怎么更新缓存
HTML5 header标签怎么用?HTML5 header标签的作用介绍
几种关于html 5 的动态效果制作方法
h5怎样用绘制五角星
HTML5对手机页面长按会粘贴复制禁用的解决方法
移动端HTML5中判断横屏竖屏的方法
HTML5面试题pc端和移动端区别
h5的服务器推送事件详解
HTML5中新特性之语义化标签的实例分析
详细介绍HTML5使用audio标签实现歌词同步的效果
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解HTML5使用DOM进行自定义控制示例代码