一、HTML5新增的video、source标签

 <video width="320" height="240" controls="controls“ poster="/images/w3school.gif">

       <source src="movie.ogg" type="video/ogg">

       <source src="movie.mp4" type="video/mp4">

       您的浏览器不支持video标签

 </video>

二、HTML5支持的视频格式

三、video标签的属性

四、HTML5的音频标签

 <audio src="好久不见.mp3" autoplay controls>

          您的浏览器不支持 audio 标签。

 </audio>

HTML5支持的音频格式 .wav .mp3

五、音频标签的属性

六、浏览器默认播放控件

 <!DOCTYPE HTML>

 <html>

     <head>

     <script>

     window.onload=function  () {

          var playbtn=document.getElementById("play");

          var video=document.getElementById("video");

          playbtn.onclick=function  () {

                video.play();

          }

     }

     </script>

     </head>

     <body>

       <video controls=controls  loop =loop poster="1.jpg" id="video">

         <source src="iceage4.mp4"></source>

         <source src="iceage4.webm"></source>

       </video>

       <input type="button" value="播放" id="play"/>

       <audio src="fcml.mp3" controls=controls >

       </audio>

     </body>

 </html>

七、自定义播放控件相关API

video.webkitRequestFullScreen() ： 全屏

video.paused ： 布尔值，是否暂停

video.play() ： 播放

video.pause() ： 暂停

事件：

timeupdate ： 当前播放位置发生改变时产生该事件

video.currentTime ：当前播放的时间，单位秒

video.duration： 返回总时间，单位秒

video.muted: 布尔值，是否静音

video.volume（） : 设置音量

八、Video更多API参考

九、Video的API属性

十、Video的事件

第181天：HTML5——视频、音频的更多相关文章

  1. HTML5视频Video 音频Audio

    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...

  2. 测试开发之前端——No9.HTML5中的视频/音频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

  3. css总结16:HTML5 多媒体音频(Audio)视频(video )

    1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

  4. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

  5. HTML5 视频规范简介

    HTML5 视频规范简介  创建于 2013-02-03, 周日 00:56  作者 白建鹏 HTML 一词是“超文本标记语言”(Hyper-Text Markup Language)的缩写,是用于描 ...

  6. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  7. html5 视频

    HTML规定了一种通过video元素来包含视频的标准方法 一段HTML5视频不可缺少的元素有video.controls等.. 直到现在,仍然不存在一项在网页上显示视频的标准. 大多数视频是通过fla ...

  8. HTML5视频直播及H5直播扫盲

    章来源:http://geek.csdn.net/news/detail/95188 分享内容简介: 目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以 ...

  9. HTML5 视频直播

    目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以对于直播的一些基本知识和主要技术点也要有所了解,本次分享就向大家介绍一下其中的奥秘. 内容大体框架:  ...

随机推荐

  1. 跨域发送HTTP请求详解

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述几种跨域发HTTP请求的几种方法,POST请求,GET请求 目录: 一,采用JsonP的方式(只能 ...

  2. Android 学习1

    使用eclipse做为开发IDE, 导包快捷键 在显红的地方按shift+ctrl+o 另外自动补全使用alt+/

  3. C#反射的简单示例

    反射(Reflection)可以在运行时获 得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得每个成员的名称.限定符和参数等反正说白了就 ...

  4. cocos2dx2.0 帧动画的创建和播放过程 深入分析

    一.帧动画的创建过程帧动画的实现有四个不可或缺的类,如下:1.CCSpriteFrame:精灵帧信息.存储帧动画的每一帧的纹理基本信息. class CC_DLL CCSpriteFrame : pu ...

  5. 牛客小白月赛9 A签到（分数取模，逆元）

    传送门 对分母求一下逆元,把除法取模变成乘法取模,逆元介绍看这里 这种方法只适合模为质数的情况 #include<bits/stdc++.h> using namespace std; ; ...

  6. Linux 优化详解

    一.引子 系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监测,而且是一个长期和持续的过程,不是说现在又花了.测试了,以后就可以一劳永逸,而不是说 ...

  7. 列出连通集(mooc)

    给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时,假设我们总是从编号最小的顶点出发,按编号递增的顺序访问邻接点. 输入格式: 输入第1 ...

  8. 【Pthon入门学习】99乘法表

    学习知识点: 1. string.join(seq): 以string字符串作为分隔符,将seq的所有元素拼接成一个新的字符串 s = ['%d * %d = %d' % (y, 4, 4*y) fo ...

  9. Paper Reading - Long-term Recurrent Convolutional Networks for Visual Recognition and Description ( CVPR 2015 )

    Link of the Paper: https://arxiv.org/abs/1411.4389 Main Points: A novel Recurrent Convolutional Arch ...

  10. ExpressJS基础概念及简单Server架设

    NodeJS Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包 ...