一,视频

<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元素的更多相关文章

  1. html5--4-3 source元素-解决浏览器的兼容

    html5--4-3 source元素-解决浏览器的兼容 学习要点 掌握source元素的用法 source元素-解决浏览器额兼容 HTML5 中新增的元素 video和audio元素的子元素,可指定 ...

  2. html5的source元素

    html5的source元素 一.总结 一句话总结: 主要是解决视频播放时候的浏览器的兼容问题 二.html5的source元素 学习要点 掌握source元素的用法 source元素-解决浏览器额兼 ...

  3. HTML5之多媒体

    概览 html5新增了两个关于多媒体的元素:video和audio,前者是用于视频,后者用于音频.而他们使用非常简单 <audio src="xhn.mp3" control ...

  4. 02_HTML5+CSS详解第三天

    WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...

  5. audio和video元素

    目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...

  6. javascript 创建video元素

    <!DOCTYPE html> <html> <body> <h3>演示如何创建 VIDEO 元素</h3> <p>请点击按钮来 ...

  7. video元素和audio元素

    内容: 1.video元素 2.audio元素 注:这两个元素均是HTML5新增的元素 1.video元素 (1)用途 <video> 标签定义视频,比如电影片段或其他视频流 (2)标签属 ...

  8. html5的video元素学习手札

    为了监控移动端视频播放的情况,研究了一下 html5 <video> 标签的属性与事件触发,及其在各系统和各个浏览器的兼容情况 属性与事件 理解清楚属性和事件,才能更好的使用 video ...

  9. 《HTML5》 Audio/Video全解

    一.标签解读 <audio> 标签属性 <audio id="media" src="http://www.abc.com/test.mp3" ...

随机推荐

  1. Linux程序设计(二)shell程序设计

    1. 管道和重定向 文件描述符0:一个程序的标准输入 文件描述符1:标准输出 文件描述符2:标准错误输出 >操作符:把标准输出重定向到一个文件. >>操作符:将输出内容附加到一个文件 ...

  2. 8-6-Exercise

    HDU 1003    Max Sum 题意:给出一串数字,求出其中某段连续的数字之和最大的值,同时要输出起点的位置和终点的位置~~~ 方法一: 用sum记录某一段和的值,maxx为目前为止最大的su ...

  3. java的主函数中各个词的作用

    主函数 public static void main(String[] args){} public: main主方法是由jvm(虚拟机)来调用,jvm实际也是一程序,为了保证jvm能在任何情况下调 ...

  4. redhat开启linux server

    1.redhat linux5 enterprize 默认情况下是没有安装telnet server,可以使用rpm -q telnet查询,下图是安装后的查询结果

  5. DevExpress 用户控件 分页(下)

    分页控件调用 (1)初始化时: this.pageCtrl1.pageSize = 4; (2)数据绑定时: 从数据库中获取实时的 Public void LoadData(){ //这是只写有关分页 ...

  6. Android项目svn代码管理问题[转]

    用svn控制版本,svn本身是不会识别哪些该传,哪些不该传,这就导致有些关于路径的东西(比如拓展jar的路径)也被上传了,而当别人下载后,那个路径对于这个人可能完全不存在,项目编译就会出问题.用ecl ...

  7. Conditionals with Omitted Operands (x ? : y)

    Conditionals with Omitted Operands The middle operand in a conditional expression may be omitted. Th ...

  8. ios7新特性实践

    一 iOS 7 新特性:视图控制器切换API 二 iOS 7系列译文:认识 TextKit 三 iOS 7系列译文:iOS7的多任务处理 四 iOS7 最佳实践:一个天气应用案例(上) 五 iOS7 ...

  9. jquerymobile知识点三:弹出层popup

    弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popu ...

  10. 使用OpenXML将Excel内容读取到DataTable中

    前言:前面的几篇文章简单的介绍了如何使用OpenXML创建Excel文档.由于在平时的工作中需要经常使用到Excel的读写操作,简单的介绍下使用 OpenXML读取Excel中得数据.当然使用Open ...