html5 php video controls type,HTML_使用DOM进行自定义控制示例代码，HTML5的video虽然可用controls来展 - phpStudy...

使用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编程获取通知栏高度的方法