一、视频播放控制

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

 <!doctype html>

 <html>

 <head><title>Video</title></head>

 <body>

 <section>

 <video src="大笨熊.webm" controls></video>

 </section>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html>

 <head>

     <title>Video</title>

 </head>

 <body>

     <video controls="controls"  src="VID.webm" width="100"  autoplay="autoplay" loop="loop">

         您的浏览器不支持播放

     </video>

 </body>

 </html>

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

<!DOCTYPE html>

<html>

<head>

    <title>Video</title>

</head>

<body>

    <p>多资源视频播放</p>

    <video controls="controls" >

        <source src="VID_20131103_215333.3gp"  type="video/3pg" ></source>

        <source src="VID.webm"  type="video/webm"></source>

　　　　 ......

        您的浏览器不支持!

    </video>

</body>

</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. 使用JQuery实现图片轮播效果

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...

  2. QT背景颜色，菜单颜色更改

    1.进入QT上置菜单栏 工具->选项 2.进入选项中 环境->interface (1)颜色:点击重置是默认颜色,想修改其他颜色,点击重置旁边的颜色自行选择. (2)Theme:这个里面提 ...

  3. mysql并发控制之MVCC

    1.MVCC(Multiversion concurrency control) :多版本并发控制,当我们并发访问数据库(读或写)时,对事物内正在处理的数据做多版本控制,用以防止写操作的阻塞影响读操作 ...

  4. javascript浏览器事件

    1．  Js浏览器对象层级结构:Window 窗口对象(location地址对象.document文档对象(Form表单对象(表单控件))) 2．  Window对象属性: 名称 描述 documen ...

  5. [经验交流] 试用基于 influxdb+kapacitor 的监控系统

    2017年10月16日: 使用中发现kapacitor的ui过于简单,不能满足实际工作需要,现已切换到grafana --------- 两个月前试用了基于 elasticsearch + xpack ...

  6. 「JavaScript面向对象编程指南」闭包

    闭包 JS只有函数作用域,函数外为全局变量,函数内为局部变量 绿圆是函数fn的作用域,在这范围内可访问局部变量b和全局变量a,橙圆是fn内部函数inner的作用域,此范围内可访问自身作用域内的变量c, ...

  7. hihocoder 1505

    hihocoder 1505 题意:给你n个数,让你从n个数中抽两个数,再抽两个数,使得前两个数和后两个数相等 分析:对 i,j,p,q遍历的话时间复杂度会达到o(n4),所以考虑优化p,q 假设分配 ...

  8. gatewayworker开发单聊应用解决的问题

    绑定唯一id时,遇到的信息发送同步问题 问题:A-B A-C A发送信息给B和C时  A绑定了唯一id  若B.C发送信息给A则A处会同时手到来自于BC的信息 用解绑和生成新的client_id无法避 ...

  9. Python简单爬虫获取岗位招聘人数

    #encoding=utf-8 import selenium import selenium.webdriver import re import time # pip install seleni ...

  10. Light OJ 1085 - All Possible Increasing Subsequences

    题目 link 给定一个序列, 求出上升子序列的总数. 分析 Dp[i] 表示序列 以 i 结尾的数目. 可知 Dp[i]=∑Dp[x]+1 这是一个前缀和, 用树状数组维护. Code #inclu ...