HTML 5 视频(video)
video 元素支持三种视频格式 |
IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 | No | 3.5+ | 10.5+ | 5.0+ | No |
带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 | 9.0+ | No | No | 5.0+ | 3.0+ |
带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 | No | 4.0+ | 10.6+ | 6.0+ | No |
1、设置一个ogg格式的文件
<video src="movie.ogg" controls="controls" height="200px" width="300px">
您的浏览器不支持 video 标签。
</video>
执行如下:
当浏览器不支持ogg格式时则显示“您的浏览器不支持 video 标签。”
2、设置多种格式
<video width="320" height="240" poster="Suk.png" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
执行如下:
如上图为视频设置一个默认图片。也可以添加其他属性。
<video> 标签的属性如下:
controls/controls="controls" 显示播放按钮
autoplay/autoplay="autoplay" 立即播放
loop/loop="loop" 循环播放
muted/muted="muted" 静音
preload/preload="preload" 加载视频d
poster="路径" 显示默认图片
3、自定义播放暂停及大小(Video + DOM)
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeNormal()">更改大小</button>
<video id="video1" width="200">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
将javascript写在html的下方
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
i f (myVideo.paused)
myVideo.play(); //播放
else
myVideo.pause(); //暂停
}
function makeNormal()
{
myVideo.width=420; //自定义宽度,高度自适应
}
</script>
执行如下:
大多数浏览器支持的视频方法、属性和事件(日后在做理解)
方法 | 属性 | 事件 |
---|---|---|
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 |
下方为html5 视频和音频的方法属性和事件参考
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
HTML 5 视频(video)的更多相关文章
- (Python基础教程之二十二)爬虫下载网页视频(video blob)
Python基础教程 在SublimeEditor中配置Python环境 Python代码中添加注释 Python中的变量的使用 Python中的数据类型 Python中的关键字 Python字符串操 ...
- HTML5视频Video 音频Audio
视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...
- [转] Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- HTML5无插件多媒体Media——音频audio与视频video
文件日志地址 http://blog.csdn.net/q1056843325/article/details/60336226 音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 ...
- CSS canvas 捕捉视频video元素截图
video元素介绍: http://www.runoob.com/html/html5-video.html https://developer.mozilla.org/zh-CN/docs/Web/ ...
- 【转】Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- 视频video遇到一些坑
1.video层级最高问题 解决方案思路:当点击其他按钮触发事件时,视频层级挡住其他外层,比如会挡住弹窗,这是应该让视频暂停播放且隐藏,这是视频这个地方会空一个位置可以放一张封面占位,这样就解决视频层 ...
- html5之音频、视频(video&audio)
音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...
- html5视频video积累
又是好几个月没有写东西,还是太懒散了~必须要教育下自己罗~ 这次做了个播放视频的移动H5,之前没有仔细玩过,好好记录下基本知识,还有遇到的一些坑,方便之后再次遇见后进行解决 一.基本 video标签在 ...
随机推荐
- sqlplus连接oracle失败分析和解决
背景: 多台Linux服务器需要安装Oracle客户端,实现和Oracle数据库连接做业务处理. 安装完第一台后,直接将安装的目录压缩并复制到其他几台机器上,启动sqlplus连接数据库时,一直提示输 ...
- composer的安装以及laravel框架的安装(一)
laravel号称世界上最好的php框架,没有之一,下面介绍它的安装 laravel学习交流qq群:293798134 composer的安装 : php开发者很多,并且在web开发领域占据绝对统治地 ...
- myBatis学习笔记
java.lang.NullPointerException at cn.itcast.mybatis.dao.UserDaoImpl.findUserById(UserDaoImpl.java:22 ...
- MySQL SQL优化
一.优化数据库的一般步骤: (A) 通过 show status 命令了解各种SQL的执行频率. (B) 定位执行效率较低的SQL语句,方法两种: 事后查询定位:慢查询日志:--log-slow-qu ...
- 双系统Ubuntu分区扩容过程记录
本人电脑上安装了Win10 + Ubuntu 12.04双系统.前段时间因为在Ubuntu上做项目要安装一个比较大的软件,导致Ubuntu根分区的空间不够了.于是,从硬盘又分出来一部分空间,分给Ubu ...
- Java 23种设计模式 (通俗易懂解释收集整理)
(补充中...) P02 抽象工程模式 P14 TemplateMethod 模板方法模式 讲清楚了为什么叫做模板方法 http://www.cnblogs.com/java-my-life/arc ...
- r-cnn学习(四):train_faster_rcnn_alt_opt.py源码学习
论文看的云里雾里,希望通过阅读其代码来进一步了解. 参考:http://blog.csdn.net/sloanqin/article/details/51525692 首先是./tools/train ...
- 音频指纹(Philips)
参考<A Highly Robust Audio Fingerprinting System> Philips 音频指纹提取流程: 仿真效果: 第一个图为歌曲1的第一个指纹. 第二个图为歌 ...
- js获取网站项目根路径
//js获取项目根路径,如: http://localhost:8083/uimcardprj function getRootPath(){ //获取当前网址,如: http://localhost ...
- WPF 线程 Dispatcher
WPF 应用程序从两个线程开始: 一个用于处理呈现 一个用于管理 UI 呈现线程有效地隐藏在后台运行,而UI线程则接收输入.处理事件.绘制屏幕以及运行应用程序代码. 大多数应用程序都使用一个 UI 线 ...