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 ...
随机推荐
- DevExpress DateEdit控件选择精确到秒
先看看下面的效果图: 设置以下属性 dateEdit1.Properties.VistaDisplayMode = DevExpress.Utils.DefaultBoolean.True; date ...
- openstack--2--控制节点安装mysql和rabbitmq
生产中可以把mysql数据库单独安装到一台机器上,这里因为实验机器有限,就把mysql安装到了控制节点 其实openstack每个组件都可以安装到单独的机器上. RabbitMQ介绍 RabbitMQ ...
- Spring Cloud 与 Dubbo、Spring Cloud 与 Docker、Spring Cloud 与 Kubernetes 比较
出处:http://dockone.io/article/4142
- js判斷是否是正整數
var curt_page = $("input[name='curt_page']").val(); if (!(/(^[1-9]\d*$)/.test(curt_page))) ...
- Python应用场景 （转）
Web应用开发 Python经常被用于Web开发.比如,通过mod_wsgi模块,Apache可以运行用Python编写的Web程序.Python定义了WSGI标准应用接口来协调Http服务器与基于P ...
- Linux lsattr命令详解
Linux lsattr命令 Linux lsattr命令用于显示文件属性. 用chattr执行改变文件或目录的属性,可执行lsattr指令查询其属性 用法: lsattr [-adlRvV][文件或 ...
- mac home目录创建文件夹，修改权限
mac 是基于unix, 自带就有home目录,但是为空.home目录的默认所属用户是root wheel,mac默认的root账号所属用户是root admin,所以root也无法在home目录下创 ...
- Mibew Messenger (also known as Open Web Messenger)
Mibew Messenger (also known as Open Web Messenger) is an open-source live support application writte ...
- MySQL Binlog解析
https://yq.aliyun.com/articles/238364?spm=5176.8067842.tagmain.52.73PjU3 摘要: 概述 MySQL的安装可以参考:Linux(C ...
- mha error
MasterFailover.pm 1473 $ret =1474 $_server_manager->change_master_and_start_slave( $target, $late ...