HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法、属性和事件。
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。
实例
为视频创建简单的播放/暂停以及调整尺寸控件：
<!DOCTYPE html>
<html>
<body> <div style="text-align:center;">
<!--添加按钮，input button都可以-->
<input type="button" value="播放/暂停" onclick="playstop()"></input>
<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 playstop()
{
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
/*放大，自己规定大小，注意不要加px*/
function makeBig()
{
myVideo.width=900;
} function makeSmall()
{
myVideo.width=320;
} function makeNormal()
{
myVideo.width=420;
}
</script> </body>
</html>
<video src="/i/movie.ogg" width="320" height="240" controls="controls">
例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
视频格式
当前，video 元素支持三种视频格式：
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
HTML5 <video> - 使用 DOM 进行控制的更多相关文章
- HTML5 视频（二） <video> 使用 DOM 进行控制
HTML5 <video> 使用 DOM 进行控制 一.HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音 ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- HTML5: HTML5 Video(视频)
ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
- Html5 Video 实现方案
来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- DCloud-Video：Html5 Video 实现方案
ylbtech-DCloud-Video:Html5 Video 实现方案 1.返回顶部 1.1. http://ask.dcloud.net.cn/article/569 1.2. 一. Html5 ...
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- 移动端HTML5<video>视频播放优化实践[转]
http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...
随机推荐
- 【java项目小记--JManager】项目开始原因及github部署
--记于2016-8-11 毕业已三载,忽然想起大学时的毕业设计项目,想到曾在毕业答辩上说,会吸取老师点评并逐渐完善该项目.而今 老师点评已忘了个干净,项目也还是毕业时的样子,正好最近有些时间,打算兑 ...
- 当父级是body时，子元素设置position：absolute；定位是根据body还是html呢？
position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
- javascript 之 prototype 浅析
prototype 原型 javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别 ...
- css学习笔记 6
对于css样式文件的规划方式将直接影响后期对web站点维护的效率,对于大型的复杂站点一般将css样式文件分为两部分:页面的全局定义及处理页面基本布局的css样式文件和处理细节方面的css样式文件.这样 ...
- 删除Kafka的topic
刚接触Kafka,开始认为删除一个topic只是运行一下Kafka-topic.sh的delete命令就行了,但是,事实却不是这样,会出现两种情况:(1) 如果topic没有使用过即没有传输过消息,可 ...
- python SimpleHTTPRequestHandler初探
1,转自 https://blog.gtwang.org/web-development/python-simplehttpserver-web-server/ 如果你急需一个简单的Web Serve ...
- JavaScript判断、循环、Map、Set
本文是笔者在看廖雪峰老师JavaScript教程时的个人总结 一些判断条件 JavaScript把null.undefined.0.NaN和空字符串''视为 ...
- JavaScript进阶知识点（慕课）
JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等) 一. 数组 var myarray=n ...
- 即时聊天IM之二 openfire 整合现有系统用户
合肥程序员群:49313181. 合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q Q:408365330 E-Mail:egojit@qq.com 综述: ...
- 神奇的margin之豆瓣豆瓣么么哒
在经过周末的豆瓣主页和这周的豆瓣电影,表示网页什么的已经被我玩坏了. 老师在周末布置豆瓣主页,对于只学了四天的css和html的我,表示鸭梨山大. 最开始的两个小时只能做出一个连自己都看不下去的导航栏 ...