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" ...
随机推荐
- 让IE6兼容position:fixed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- php 写一个水仙花数的函数
判断一个数是不是水仙花数 <?php function is_shuixianhua($i) { $length=strlen($i); $i=(string)$i; $sum=0; for($ ...
- git push 报错
git push报错误: Git push error: RPC failed; result=56, HTTP code = 200 fatal: The remote end hung up un ...
- javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式
一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一 ...
- Look and say numbers
地址:http://www.codewars.com/kata/53ea07c9247bc3fcaa00084d/train/python There exists a sequence of num ...
- 微软称iPad版Office必来临 目前在完善中
[PConline 资讯]微软在今年6月份的时候面向iPhone发布了Office,同时需要用户注册Office 365.而鲍尔默今天在参加Garnter科技研讨会时透露,iPad版本的Office始 ...
- 在android客户端加载html源代码总结
在实际应用中,客户端要从网页上获取数据是常见的事,如果要解析网页上的html文档,那么首先得获取html源码,然后现在一般使用Jsoup来转换成Document文档来进行解析,本文主要讨论如何使用Js ...
- hibernate入门之person表
下面的hibernate入门person表指的是:根据mysql数据库中的test表和其中的元素-->建立映射表==>进而创建持久化类的顺序来操作了,下面为步骤 1.配置MySQL驱动程序 ...
- LabVIEW设计模式系列——普遍使用值改变事件
标准: 1.当使用值改变事件时,使用单击时触发或者单击时释放开关动作.这样即保证仅仅触发一次,也保证按钮恢复默认值 标准:1.值改变事件的优点:不论是鼠标动作还是键盘动作都能触发值改变事件,增强了程序 ...
- hdu2011java
多项式求和 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...