一、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. # 第二周课堂实践以及MyOD

    第二周课堂实践以及MyOD 之前使用的虚拟机出现问题被我删掉了,开始学着使用Mac系统自带的终端.在课堂上出现了问题,询问王雄老师也没有解决,课下先使用了实验楼环境进行实验,后来又在Mac重新进行了尝 ...

  2. sort与qsort的异同

    主要内容: 1.qsort的用法 2.sort的用法 3.qsort和sort的区别 qsort的用法: 原 型: void qsort(void *base, int nelem, int widt ...

  3. 为什么说private方法是有罪的

    具体的这句话从什么地方获得,我已经无从考证了,但是想想我们现在使用private的场景,你慢慢的就会发现,private的方法,大多数都是copy代码,当然我只是说大多数,还有就是大多数private ...

  4. dat类型文件入库后校验数据有问题

    一.问题: dat或者txt文件入库后,字段进行正则校验报出不应该出现的错误 二.排查: (1)根据报出的错误,把错误日志中的字串单独提取出来,进行正则校验发现没有问题 (2)可以想到,要不是程序问题 ...

  5. zabbix最新版3.4搭建(根据官方文档适当修改)

    操作系统:CentOS Linux release 7.4.1708 (Core) 1.安装apache 1.1 安装apache yum install httpd httpd-devel 1.2 ...

  6. 1. oracle12C的安装

    官方安装文档:https://docs.oracle.com/database/121/LTDQI/toc.htm#BHCCADGD 1.软件准备 oracle12c.zip 安装包 VMware 虚 ...

  7. day 2 函数的嵌套

    1.函数的嵌套     百度百科 2.产品如何运作 3.应用 1)版本1:打印1条线 #1.定义函数 def print_line(): print("-"*50) #2.调用函数 ...

  8. Django模板层之templates

    一 模版简介 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(request): now ...

  9. 支付宝、微信、QQ 收款二维码三合一

    最近折腾了一下合并收款码,简单记录一下折腾的过程,方法不唯一,只是提供一种思路,如果各位大佬有更加简单粗暴的办法,那就更好了. 原理 首先解析出三个二维码的内容,用 Nginx 判断 User age ...

  10. Pycharm 2018.2.1-2018.1

    请支持正版,谢谢! 下载激活包 激活包地址 解压后会得到两个包: JetbrainsCrack-2.10-release-enc.jar JetbrainsCrack-3.1-release-enc. ...