一、视频播放控制

　1.Html5支持的视频格式有.webm,.ogg,在Html5中播放视频所用的标签为<video controls="controls" src="dahuaxiyou.webm"></video>，其中src是引用视频文件的地址属性，controls是播放控制，如果不设置改属性，将无法控制视频的播放，例如：

  1.  <!doctype html>
  2.  <html>
  3.  <head><title>Video</title></head>
  4.  
  5.  <body>
  6.  <section>
  7.  <video src="大笨熊.webm" controls></video>
  8.  </section>
  9.  </body>
  10.  </html>

2. 当然如果当前的浏览器如果不支持html5，那我们是不是应该给用户一个友好的提示呢，答案是必须的，例如

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title>Video</title>
  5.  </head>
  6.  <body>
  7.      <video controls="controls"  src="VID.webm" width="100"  autoplay="autoplay" loop="loop">
  8.          您的浏览器不支持播放
  9.      </video>
  10.  
  11.  </body>
  12.  </html>

　3. 如果要播放多种格式的视频，而我们有无法判断用户所使用的是哪个浏览器，那又该怎么办呢，这种情况下Html5还能保证视频的正常播放吗，针对这类问题，html5提出了多资源的播放功能，也就是<source><source>标签，我们可以在<video>标签中放置多个资源文件以引入不同的视频格式,例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Video</title>
  5. </head>
  6. <body>
  7.     <p>多资源视频播放</p>
  8.     <video controls="controls" >
  9.         <source src="VID_20131103_215333.3gp"  type="video/3pg" ></source>
  10.         <source src="VID.webm"  type="video/webm"></source>
  11. 　　　　 ......
  12.         您的浏览器不支持!
  13.     </video>
  14. </body>
  15. </html>

　浏览器会首先选择播放第一source文件，如果失败，会选择播放第二个source文件，直到找到能能够播放的视频，source标签中的type属性是指定视频的格式，同样src是引用视频文件的路径

　 4.视频播放属性

  1. 自动播放:AutoPlay="AutoPlay";
  2. 循环播放:Loop="Loop";
  3. 宽度:width;

二、音频文件播放控制

　1.Html5中支持的音频格式有.mp3,声明音频播放的标签为<audeo>　

Html5+CSS3之音视频播放的更多相关文章

  1. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  2. HTML5+CSS3整体回顾

    http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...

  3. 7款效果惊人的HTML5/CSS3应用

    今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单 作为前端开发者,各种各样的jQuery菜单见过不少,这款 ...

  4. html5+css3杂记

    H5C3个人笔记 before&after 1. 必须有content display 2. 场景:不想改变html结构:解决浮动 解决浮动: 2c d h v transition 过渡 1 ...

  5. 【Web前端HTML5&CSS3】03-字符实体与语义标签

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素(bloc ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  9. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

随机推荐

  1. 虚拟云主机创建多个站点方法（.htaccess实现）

    阿里的普通版虚拟云主机最多只能建一个站点,但可以绑定多个域名.如果我们想创建2个或3个主机怎么办呢?难道需要再另外购买一台主机? 其实我们可以通过.htaccess文件来定义相关域名绑定对应的网站目录 ...

  2. python—异常

    异常是在程序中不可避免的,当程序遇到一个异常时程序就会停止,可以使用try—except进行处理异常,即便在出现异常程序也可以继续运行. 语法: try: 代码 except 异常名: 处理异常的代码 ...

  3. Centos6.5使用yum安装mysql——快速上手必备(转载)

    第1步.yum安装mysql[root@stonex ~]#  yum -y install mysql-server安装结果:Installed:    mysql-server.x86_64 0: ...

  4. 工作经验-PLSQL连接远程数据库

    复制远程Oracle,tnsnames.ora 放到[D:\OneDrive\PLSQL\instantclient_11_2\network\admin] PLSQL->Tools > ...

  5. 关于SVN报错 svn: E170013 E125006: contains invalid filesystem format option 'addressing logical'

    在使用svn的时候,遇到了这样的一个问题 首先我使用TortoiseSVN 右键创建的repository. 之后用IDEA,配置了1.9.4版本的SVN,去commit访问这个仓库 结果出现了以下的 ...

  6. python 类的魔法函数 内置函数 类方法 静态方法 抽象类

    魔法函数 __init__函数 init函数会在实例化A这个类的时候被调用 class A(): def __init__(self): print('__init__函数') a = A() 显示结 ...

  7. Python自动化中的元素定位xpath（二）

    1.Xpath元素定位 1)ele = b.find_element_by_xpath(‘/html/body/from/input[1]’) 2)Ele = b.find_element_by_xp ...

  8. pycharm安装package时报错

    在pycharm pip 包时,提示报错:module 'pip' has no attribute 'main' 原因:由于我的是pip 18.1 版本里没有main() 解决方法: 如不降级 pi ...

  9. Django组件-cookie与session

    一.会话跟踪技术 1.什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而 ...

  10. mac上安装vue项目

    mac上如何安装vue项目 一, mac系统安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/H ...