一、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. 2017-2018-1 《信息安全技术》实验二——Windows口令破解

    2017-2018-1 <信息安全技术>实验二--Windows口令破解 所用工具 系统:能勾起我回忆的Windows 2003 工具:LC5.SuperDic Windows口令破解 口 ...

  2. 20145226夏艺华 《Java程序设计》实验报告二

    实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步骤 (一)单元测试 ...

  3. 20145234黄斐《java程序设计》第三周

    教材学习内容总结 类与对象 定义:对象,与过程相对. Java中变量有2种类型,一个是基本类型,另一个则是类类型.基本类型在之前学过,本次学习类类型.使用Java撰写程序几乎都是在使用对象,要产生对象 ...

  4. day7 RHCE

    6.配置本地邮件服务 在系统server0和desktop0上配置邮件服务,满足以下要求:这些系统不接收外部发送来的邮件这些系统上本地发送的任何邮件都会自动路由到 classroom.example. ...

  5. cogs62 [HNOI2004] 宠物收养所

    cogs62 [HNOI2004] 宠物收养所 啦啦啦啦 不维护区间的平衡树题都是树状数组+二分练手题! 不会的参考我的普通平衡树的多种神奇解法之BIT+二分答案 // It is made by X ...

  6. Kettle定时执行

    1,Kettle跨平台使用.    例如:在AIX下(AIX是IBM商用UNIX操作系统,此处在LINUX/UNIX同样适用),运行Kettle的相关步骤如下:    1)进入到Kettle部署的路径 ...

  7. Spring Cloud搭建微服务架构----文章汇总

    Spring Cloud搭建微服务架构----前言 原文地址:https://my.oschina.net/u/1000241/blog/882929 Spring Cloud搭建微服务架构----使 ...

  8. VIN码识别/车架号识别独家支持云识别

    VIN码(车架号)对于懂车的人来说并不陌生,不要小看这一串字符,从VIN码中可以读懂车辆的生产厂家.年代.车型.车身型式及代码.发动机代码及组装地点等信息. 一辆汽车的VIN码也是车辆的唯一身份证明, ...

  9. 导出Office365中的组及成员

    Set-ExecutionPolicy unrestricted $cred = Get-Credential  $session = New-PSSession -ConfigurationName ...

  10. 利用Tensorflow进行自然语言处理（NLP）系列之一Word2Vec

    同步笔者CSDN博客(https://blog.csdn.net/qq_37608890/article/details/81513882). 一.概述 本文将要讨论NLP的一个重要话题:Word2V ...