使用DOM进行自定义控制示例代码
HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。
当然效果不是很美观,若想好看的可以自己设置css样式等。
复制代码代码如下:
播放/暂停
大
中
小
您的浏览器不支持此HTML5 视频标签。
复制代码代码如下:
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;
}
需要注意的是在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。
在视频的元数据已加载后,其他属性才可用。相关阅读:
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
三种方式获取XMLHttpRequest对象
JavaScript从数组中删除指定值元素的方法
Android字符串和十六进制相互转化出现的中文乱码问题
Win7系统网页无法添加到收藏夹的解决方法
win10右键打开反应慢是怎么办 win10正式版右键反应慢的解决方法
css3选择器基本介绍
android开发基础教程—文件存储功能实现
Android编程实现自动检测版本及自动升级的方法
css中替换元素和不可替换元素及显示元素详细探讨
div+css相对定位和绝对定位用法实例详解
Win10磁盘配额在哪 Win10磁盘配额位置及作用介绍
Win7系统安装软件或游戏程序提示“文件无法写入”的故障分析及解决方法
Android编程获取通知栏高度的方法