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 ...
随机推荐
- IntelliJ IDEA使用心得
前言:我原来一直使用的是Eclipse,但是发现有的教程上使用的是Intellij这个IDE,而且我发现Eclipse在Web编程上特别是页面上的自动补全上确实有些不足,而且Intellij这个软件的 ...
- mysql之 openark-kit online ddl
MySQL工具集openark-kit (官方网站 http://code.openark.org/forge/openark-kit),内部包含很多小工具,在5.6之前用于实现online ddl操 ...
- sql查询：存在A表而不在B表中的数据
A.B两表,找出ID字段中,存在A表,但是不存在B表的数据. 方法一:使用 not inselect distinct A.ID from A where A.ID not in (select ID ...
- py-day1-5 python 分割 、 字母大小转换
# partition() 分割为3段 从左往右遇见的第一个开始 test = 'bassaiwoll' v = test.partition('s') print(v) ('ba', 's', 's ...
- Linux 下Tomcat单机多应用
修改/etc/profile 下,增加如下两个tomcat的配置.apache-tomcat-8.0.50为第一个tomcat, apache-tomcat-8.0.50_2为第二个tomcat ex ...
- Sql Server Report Service 的部署问题(Reporting Service 2014為什麼不需要IIS就可以運行)
http://www.cnblogs.com/syfblog/p/4651621.html Sql Server Report Service 的部署问题 近期在研究SSRS部署问题,因为以前也用到过 ...
- WPF Demo511 控件共用事件
路由事件: 1.路由事件一般使用的三种策略如下所示: A.Bubble(冒泡模式):事件从自己激发一直传递到根元素; B.Direct(直接模式):只有事件源才有机会相应事件(和传统事件一样); C. ...
- Azure ARM (18) 将Azure RM Manage Disk托管磁盘的Image，跨订阅迁移
<Windows Azure Platform 系列文章目录> 先挖一个坑,以后再埋. 最近遇到一个客户需求,客户使用了Azure RM Manage Disk托管磁盘,然后捕获镜像做成了 ...
- ALGO-139_蓝桥杯_算法训练_s01串(递归)
问题描述 s01串初始为" 按以下方式变换 0变1,1变01 输入格式 1个整数(~) 输出格式 n次变换后s01串 样例输入 样例输出 数据规模和约定 ~ 记: 题目给出的信息带有误导性, ...
- 使用googletest进行C++单元测试(Netbeans为例)
googletest设置步骤(Netbeans为例) 下载googletest [https://github.com/google/googletest],解压到<gtest_dir> ...