H5 Video + DOM
HTML 5 Video + DOM
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。
实例
为视频创建简单的播放/暂停以及调整尺寸控件：
播放/暂停 大 中 小
上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。
HTML5 <video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件：
|
方法 |
属性 |
事件 |
|
play() |
currentSrc |
play |
|
pause() |
currentTime |
pause |
|
load() |
videoWidth |
progress |
|
canPlayType |
videoHeight |
error |
|
duration |
timeupdate |
|
|
ended |
ended |
|
|
error |
abort |
|
|
paused |
empty |
|
|
muted |
emptied |
|
|
seeking |
waiting |
|
|
volume |
loadedmetadata |
|
|
height |
||
|
width |
注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
H5 Video + DOM的更多相关文章
- 【转】视频H5 video最佳实践
原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...
- H5 video自定义视频控件
1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- H5 video poster属性—设置视频封面
打开一个视频,在点击播放之前会看到一张封面图,点击之后封面消失,随即播放视频. 若现有一需求,要你自定义给某个视频设置封面,应该怎么做呢? 此时可使用H5 video提供的poster属性即 ...
- H5 video全屏与取消全屏兼容
H5 video全屏与取消全屏各浏览器兼容, requestFullscreen()全屏方法,exitFullscreen()退出全屏方法.兼容各个浏览器与css3兼容一样加个前缀即可. // 全屏 ...
- H5 video 标签 详解
昨天使用H5 video 标签 写了视频播放 本打算参考爱奇艺的代码进行修改 发现 它是动态数据 静态页面需要拆解代码 我情急之下 使用了 video 整理一下笔记 后面有人用 ...
- HTML 5 简介、视频、Video + DOM、音频、拖放
HTML5 是下一代的 HTML. 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...
- H5——video百花齐放（浏览器自带的播放器）
前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...
- HTML 5 Audio/Video DOM canplaythrough 事件在移动端遇到的坑
canplaythrough 事件定义和用法 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件. 当音频/视频处于加载过程中时,会依次发 ...
- H5 video标签视频加载存在的问题
客户发现上传的视频无法播放,然后主管让我解决这个问题,这个页面不是我负责的,我看了代码,发现视频用的h5标签video标签加载视频.我看了没问题,然后 我先用ie浏览器打开,视频加载没问题.然后我给主 ...
随机推荐
- Ionic在windows下的环境配置难题
具体的配置方法网上有很多,可以参考http://my.oschina.net/JeeChou/blog/219699?fromerr=k1hPtBUs,但问题还是会有,我总结的主要有以下几个方面: 1 ...
- 笔记:Spark简介
Spark简介 [TOC] Spark是什么 Spark是基于内存计算的大数据并行计算框架 Spark是MapReduce的替代方案 Spark与Hadoop Spark是一个计算框架,而Hadoop ...
- [JavaScript] 学习笔记-JavaScript基础教程
1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入H ...
- jstl__报错
1.缺少JAR:解决的办法就是手动将jstl.jar和 standard.jar这两个jar包加入到web项目的WEB-INF/lib目录中或者是把jstl.jar.standard.jar复制到to ...
- Java变量&&简单程序流程&&循环
变量:强类型局部变量: 1.先赋值,后使用 2.作用范围:从定义开始,到所在代码块结束 3.重合范围内不允许重复命名 数据类型(8中基本类型) byte 1B -128~127 short 2B -3 ...
- node-webkit制作桌面应用
心血来潮突然想用js尝试写桌面应用,突然发现我大js真的无所不能.在网上搜到了这么一个东东:node-webkit.用Node.js来进行系统资源的访问,用HTML+CSS完成页面的搭建.哇,一切突然 ...
- "ORA-01460: 转换请求无法实现或不合理"及C#操作Blob总结
class BlobDemo { private static readonly string ConnectionString = "Data Source=Tcco;User ID=sc ...
- HNOI2015 Day 2题解
昨天做了HNOI day 2,感觉好像还是可做的,想当年什么splay还是高级算法,现在点剖什么就老考了简直丧病,虽然第二题还没写那就先当下嘴巴选手吧= = T1:[HNOI2015]落忆枫音 描述: ...
- struts2接收参数的5种方法
以下形式中最常用的是前两种 1. 使用Action的属性: 在action 里面定义要接收的参数,并提供相应的setter,getter,和提交参数的名称一致, 并不用做数据类型的转换相应提交方式可以 ...
- php批量删除，批量操作
批量删除多条记录,对于比较多的信息,如果没有批量删除功能是非常麻烦的. 1.从数据库中拿一张表过来,写个复选框进行选择 可以加全选复选框 连接数据库什么的都不写啦 代码: <form act ...