video,source元素
一,视频
<video src="../[再一次快乐结局]第15集.mp4" controls="controls" width="500" height="300" poster="../1.jpg" loop="loop" autoplay="autoplay" preload="auto"> 您的浏览器暂不支持! </video>
注意:此标签不在input标签内
control:显示视频的播放,音量,暂停等工具栏
width,height:视频的长宽
poster:播放前的预览图
loop:当图片结束时,重新播放
autoplay:加载结束自动播放
preload: 1.auto:自动加载视频的播放时间,播放内容
2.none:默认值
3.metadata:自动加载视频的时间,但不加载播放的内容
<video width="500" controls="controls" > 您的浏览器暂不支持!
<source src="../[再一次快乐结局]第15集.mp4" type="video/mp4" />
<source src="../[再一次快乐结局]第15集.webm" type="video/webs" />
<source src="../[再一次快乐结局]第15集.ogg" type="video/ogg" />
</video>
您的浏览器暂不支持此格式!
</video>
source:解决浏览器的兼容性问题,但此时video标签内不能使用src
以上三种视频格式,浏览器会根据格式选择播放,哪种格式合适就哪种,若格式都不满足,将会显示source标签中的内容;
二,音频
<audio controls="controls" > 您的浏览器暂不支持!
<source src="../爱你.mp3" type="audio/mp4" />
<source src="../爱你.webm" type="audio/webs" />
<source src="../爱你.ogg" type="audio/ogg" />
</audio>
与video相比,减少的属性:width poster
video,source元素的更多相关文章
- html5--4-3 source元素-解决浏览器的兼容
html5--4-3 source元素-解决浏览器的兼容 学习要点 掌握source元素的用法 source元素-解决浏览器额兼容 HTML5 中新增的元素 video和audio元素的子元素,可指定 ...
- html5的source元素
html5的source元素 一.总结 一句话总结: 主要是解决视频播放时候的浏览器的兼容问题 二.html5的source元素 学习要点 掌握source元素的用法 source元素-解决浏览器额兼 ...
- HTML5之多媒体
概览 html5新增了两个关于多媒体的元素:video和audio,前者是用于视频,后者用于音频.而他们使用非常简单 <audio src="xhn.mp3" control ...
- 02_HTML5+CSS详解第三天
WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...
- audio和video元素
目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...
- javascript 创建video元素
<!DOCTYPE html> <html> <body> <h3>演示如何创建 VIDEO 元素</h3> <p>请点击按钮来 ...
- video元素和audio元素
内容: 1.video元素 2.audio元素 注:这两个元素均是HTML5新增的元素 1.video元素 (1)用途 <video> 标签定义视频,比如电影片段或其他视频流 (2)标签属 ...
- html5的video元素学习手札
为了监控移动端视频播放的情况,研究了一下 html5 <video> 标签的属性与事件触发,及其在各系统和各个浏览器的兼容情况 属性与事件 理解清楚属性和事件,才能更好的使用 video ...
- 《HTML5》 Audio/Video全解
一.标签解读 <audio> 标签属性 <audio id="media" src="http://www.abc.com/test.mp3" ...
随机推荐
- storyboard ID
The storyboard ID is a String field that you can use to create a new ViewController based on that st ...
- glance was not installed properly
- Package org.xml.sax Description
This package provides the core SAX APIs. Some SAX1 APIs are deprecated to encourage integration(集成:综 ...
- Java中的Stringbuffer类解析
StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...
- spfa + slf优化
最近在练习费用流 , 不是要用spfa吗 ,我们教练说:ns学生写朴素的spfa说出去都让人笑 . QwQ,所以就去学了一下优化 . slf优化就是双向队列优化一下,本来想用lll优化,可是优化后我t ...
- iOS 隐藏Tabbar
两种方法用来隐藏tabBar 1.在本页面隐藏 #pragma mark - 隐藏tabBar - (void)viewWillAppear:(BOOL)animated{ self.tabBarC ...
- JDBC——Sql Server
sun公司设计一套java语言操作不同的数据库提供的是接口,二具体的实现类是由各大数据库厂商实现的. private static final String driver= "com.mic ...
- FM笔记
1.获取生产订单状态 CALL FUNCTION 'STATUS_TEXT_EDIT' EXPORTING client = sy-mandt objnr = p_objnr spras = sy-l ...
- myeclipse开发代码颜色搭配保护视力
废话不多说,这个东西主要是为了保护视力的,另外我也挺喜欢上边的颜色搭配的,今天特拿出来分享.直接上图
- 基于HTML5的SLG游戏开发( 三):认识PureMVC
在游戏开发中,对于一般网络游戏,由于需要多人协同开发,每个人负责不同的模块开发,为了减少耦合,需要用来一些MVC框架,减少模块之间的耦合.我们现在使用的mvc框架是pureMVC.pureMVC的官网 ...