Html5——视频标签使用
video标签：
上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
preload 属性规定是否在页面加载后载入视频。
实例：
1、
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
您的浏览器不支持Html5标签 video tag.
</video>
</body>
</html>
2、事件、方法、属性
<div style="text-align: center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<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">
您的浏览器不支持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>
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 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
Html5——视频标签使用的更多相关文章
- HTML5视频标签video
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
- android--------WebView实现 Html5 视频标签加载
自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...
- 关于HTML5视频标签的问题
一.基本 video标签在兼容性上还是比较差的,如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8的(Opera.Mozilla.Chrome),支持H.264的( ...
- html5视频标签
<video width="200" height="200" poster="img/shamo.jpg" src="vi ...
- html5音频和视频标签
在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...
- html5-8 如何控制html5中的视频标签和音频标签
html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...
- html5-7 html5语义标签和视频
html5-7 html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...
- 使用HTML5视频事件示例
<!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
随机推荐
- [转]分布式系统唯一ID生成方案汇总
系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,也常常为这个问题而纠结.生成ID的方法有很多,适应不同的场景.需求以及性能要求.所以有些比较复杂的系统会有多个ID生成的策略.下面就介绍一些常见 ...
- [转]Java GC的原理
Java GC(garbage collection,垃圾收集,回收) GC是对JVM中的内存进行标记和回收,Sun公司的JDK用的虚拟机都是HotSpot 对象化的实例是放在heap堆内存中的,这里 ...
- 手动制作openstack windows镜像
https://docs.openstack.org/image-guide/windows-image.html 这里以 windows 2008为例: 准备工作: 1准备好windows 2008 ...
- npm install 包 失败解决方法
在ionic 安装包的时候 npm install xxx --save 出现如下错误 查看日志文件 14 verbose stack SyntaxError: Unexpected token &l ...
- Flume 多个agent串联
多个agent串联 采集需求:比如业务系统使用log4j生成的日志,日志内容不断增加,需要把追加到日志文件中的数据实时采集到hdfs,使用agent串联 根据需求,首先定义以下3大要素 第一台flum ...
- windbg 如何再内核模式调试用户空间的程序
1:使用!process 0 0 获取用户空间的所有的进程的信息 !process 0 0 **** NT ACTIVE PROCESS DUMP **** PROCESS 80a02a60 ...
- lsof根据端口返回进程号杀死进程的方法
参考自:http://newmiracle.cn/?p=661 Linux shell根据端口返回进程号杀死进程的方法 kill -9 `lsof -t -i:8888` 这个就是杀死8888端口的进 ...
- MySQL分析数据运行状态利器【SHOW PROCESSLIST】
这个博文,将只是简单的记录一下,我们的数据库操作和使用中,加索引加不上去,分析的过程,其实比较简单,就是看有没有连接进程还在操作表.有的话,将其停掉(不影响业务的场景下). 今天的主角是: SHOW ...
- mysql binlog to sql and show mysqlstatusadmin
sed '/WHERE/{:a;N;/SET/!ba;s/\([^\n]*\)\n\(.*\)\n\(.*\)/\3\n\2\n\1/}' 1.txt | sed -r '/WHERE/{:a;N;/ ...
- ALGO-143_蓝桥杯_算法训练_字符串变换
问题描述 相信经过这个学期的编程训练,大家对于字符串的操作已经掌握的相当熟练了.今天,徐老师想测试一下大家对于字符串操作的掌握情况.徐老师自己定义了1,,,,5这5个参数分别指代不同的5种字符串操作, ...