一、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. 20155213 实验三《敏捷开发与XP实践》实验报告

    20155213 实验三<敏捷开发与XP实践>实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)> ...

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

    20155232 2016-2017-3 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 1.对象(Object):存在的具体实体,具有明确的状态和行为. 2.类( ...

  3. 安装虚拟机以及学习Linux基础入门

    安装虚拟机 参考基于VirtualBox虚拟机安装Ubuntu图文教程完成了虚拟机的安装,主要遇到了以下2个问题 在新建虚拟电脑的时候,如果类型选择了Linux,则版本就只能选择Ubuntu(32 位 ...

  4. 20155327 信息安全技术 实验二 Windows口令破解

    课程:信息安全概论 班级:1553 姓名:了李百乾 学号:20155327 成绩: 指导教师: 李冬冬 实验日期及时间: 2017年10月11日 15:30-18:00 必修/选修:必修 实验序号:0 ...

  5. # 20155337 《Android程序设计》实验四实验报告

    20155337 <Android程序设计>实验四实验报告 实验一 实验内容 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPU ...

  6. MySQL 安装 + Windows7

    Window版本 1.下载 http://dev.mysql.com/downloads/mysql/ 2.解压 如果想要让MySQL安装在指定目录,那么就将解压后的文件夹移动到指定目录,如:D:\m ...

  7. [转]资深CTO：关于技术团队打造与管理的10问10答

    一.你如何衡量软件工程师个人的工作表现?如何衡量整个工程师团队的工作表现? 主要从两方面: 这个员工做的工作是不是他同意做的或者应该做的?(What) 他们是如何完成自己的工作的?(How) 任何绩效 ...

  8. 同一个电脑配置两个Git问题

    拿到公司电脑后,正常配置gitlab,以及设置邮箱等等,可以使用公司邮箱,以及一系列设置 git config --global user.name "userName" git ...

  9. Centos下安装并设置nginx开机自启动

    一.在centos环境下安装下载并安装nginx,由于nginx需要依赖一些环境才能安装,主要依赖g++.gcc.openssl-devel.pcre-devel和zlib-devel这些环境,首先得 ...

  10. Oracle 11g用exp无法导出空表的处理方法

    Oracle 11G在用EXPORT导出时,空表不能导出. 11G中有个新特性,当表无数据时,不分配segment,以节省空间 解决方法: 1.insert一行,再rollback就产生segment ...