一、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. 20155321 《Java程序设计》实验三 敏捷开发与XP实践

    实验内容 XP基础 XP核心实践 相关工具 实验步骤 敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上的过程.软件工程包括下列领域:软件需求分析.软件设计.软件构 ...

  2. 20155322 2016-2017-2 《Java程序设计》 第一周学习总结

    20155322 2016-2017-2 <Java程序设计> 第一周学习总结 教材学习内容总结 本周学习内容的主要是: 一.浏览教材,根据自己的理解每章提出一个问题. 在浏览教材后,我提 ...

  3. 20155323 2016-2017-2《Java程序设计》课程总结

    20155323 2016-2017-2<Java程序设计>课程总结 课程与实验链接 预备作业一:新学期,新展望 预备作业二:游戏经验 预备作业三:安装虚拟机和Linux系统的学习 201 ...

  4. 【BZOJ4803】逆欧拉函数

    [BZOJ4803]逆欧拉函数 题面 bzoj 题解 题目是给定你\(\varphi(n)\)要求前\(k\)小的\(n\). 设\(n=\prod_{i=1}^k{p_i}^{c_i}\) 则\(\ ...

  5. Django——test文件编写接口测试

    用自己建立的小网页来做接口测试,在Django的tests.py写下如下 test_login_page为用get方式登录login路径,根据回复验证是否查看到页面 test_login_action ...

  6. 从源码角度彻底理解ReentrantLock(重入锁)

    目录 1.前言 2.AbstractQueuedSynchronizer介绍 2.1 AQS是构建同步组件的基础 2.2 AQS的内部结构(ReentrantLock的语境下) 3 非公平模式加锁流程 ...

  7. Liunx expect 基础

    a script for study except #!/usr/bin/expect 声明文件内的语法使用 expect 的语法来执行. send send: 向进程发送字符串,用于模拟用户的输入. ...

  8. Maven私有仓库搭建以及使用

    一.使用Docker安装Nexus Docker search nexus docker pull docker.io/sonatype/nexus3 mkdir -p /usr/local/nexu ...

  9. Python常用模块之VideoCapture

    官方网址:http://videocapture.sourceforge.net/   功能介绍: VideoCapture是Win32版Python的一个扩展,可以访问视频采集设备(如USB摄像头) ...

  10. python基础知识-8-三元和一行代码（推导式）

    python其他知识目录 1.三元运算(三目运算) 三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值格式:[on_true] if [expression] else [on_false]re ...