本文摘自PHP中文网,作者不言,侵删。
这篇文章主要介绍了关于HTML5使用DOM进行自定义控制,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,下面与大家分享下使用Dom来进行自定义的一些操作和控制
HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。
当然效果不是很美观,若想好看的可以自己设置css样式等。
1 2 3 4 5 6 7 8 9 10 11 | < p id = "video_p" 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 >
</ p >
|
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 属性是立即可用的。
在视频的元数据已加载后,其他属性才可用。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
以上就是HTML5使用DOM进行自定义控制的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5-web worker apis的代码详解
HTML5中关于canvas画图之画圆形的实例介绍
HTML5的video标签操作视频详解
HTML5标准学习-简介介绍
解决h5网页中用video标签无法播放mp4视频的方法
HTML5规定在拖动被拖动数据时是否进行复制移动或链接的属性dropzone
HTML5在工作中主要干什么
HTML5 manifest离线缓存的示例代码
HTML5 canvas基本绘图之绘制矩形的示例代码详解
HTML5中localstorage本地存储的示例
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5使用DOM进行自定义控制