<video>和<audio>标签

一、<video>基本格式:

 <video width=" " heigh="" src=""> </video>

二、<video>支持的格式:一般为mp3 和 mp4

三、source标签用法

作用:source标签可以链接不同的视频文件,浏览器将使用第一个可识别的格式,内容为source标签失效时的提醒

<video width="320" height="240" controls autoplay>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持video标签
</video>

四、<video>对应的属性

  • controls 属性 在视频元素的底部展示一个元素自带的控制条工具。
  • loop 属性 视频结束后将重新开始播放。
  • poster 属性 将在视频文件播放前显示图片。

  • utoplay 属性 一旦视频就绪马上开始自动播放。
  • preload 属性 是否在页面加载后载入视频。
    • 可能值 :
    • auto (默认) :  当页面加载后载入整个视频
    • metadata :  只加载播放文件的基本信息 (如:尺寸、持续时间、第一帧信息、曲目列表等)
    • none :  当页面加载后不载入视频

这两个移动端不支持,因为耗费流量


其他不常用的属性:

  • duration 整个媒体文件的播放时长,以s为单位。
  • currentTime 以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索。并定位到媒体文件的特定位置。
  • ended 如果媒体文件已经播放完毕,则返回true
  • paused 如果媒体文件当前被暂停,则返回true
  • startTime 返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
  • error 在发生了错误的情况下返回的错误代码
  • currentSrc 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件
  • muted 为音频文件设置静音或者消除静音,或者检测当前是否为静音

五、video常用事件

  • load ( ) 方法 用于加载媒体文件。
  • pause ( ) 方法 暂停正在播放中的媒体文件。
  • play ( ) 方法 播放加载完成的文件。
  • canPlayType ( ) 方法 用来测试浏览器是否支持指定的媒体类型。
    • 该方法返回3个可能值:
    • 空字符串:表示浏览器不支持此种媒体类型
    • maybe:表示浏览器可能支持此种媒体类型
    • probably:表示浏览器确定支持此种媒体类型
  • timeupdate 事件
    • 在媒体文件播放过程中,如果播放位置发生变化,就会触发该事件。 结合多媒体元素的“currentTime”与“duration”属性,可以动态显示媒体文件播放的当前时间与总量时间。

事件总集合:

  • play 当多媒体元素开始播放媒体文件时触发
  • pause 当多媒体元素中止播放媒体文件时触发
  • ended 当媒体文件播放结束时触发
  • error 当媒体文件在加载过程中出现错误时触发
  • progress 当媒体元素正在读取媒体文件时触发
  • emptied 当媒体元素播放一个未知或异常的媒体文件时触发
  • waiting 当媒体元素正在等待加载下一帧播放数据时触发
  • loadedmetadata 当多媒体元素加载完成时间与总字节数时触发
  • playing 当媒体元素正在播放媒体文件时触发
  • volumechange 当多媒体元素音量大小改变或启动静音时触发

六、<audio>标签格式:

    <audio  src=""> </audio>
时间: 2024-08-01 02:00:50

<video>和<audio>标签的相关文章

&lt;link&gt;和&lt;script&gt;标签

这两个标签既可以写到head也可以写到body当中,因为他们都是不在浏览器当中显示的,但是习惯性link标签写在head里面,script标签写在body标签的尾部. link用来存外部css的链接,script存放js代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet"

link标签和script标签跑到body下面,网页顶部有空白

用UltraEdit的16进制编辑模式查看代码,都是EF BB BF开头的,说明都是带BOM的.我手动的将所有文件转成UTF-8 without BOM.页面终于正常了.link,script标签乖乖的跑到head下面,网页顶部空白消失.oh yeah.这就是搞了2天的答案. 最后我在网上随便下载了知名php程序的utf-8版,发现都是UTF-8 without BOM的. 那么我们继续回头看看出现问题的现象就有答案了.“锘匡豢”在页面头部出现多次的原因是首页处理文件index.php requ

javascript正则找script标签, link标签里面的src或者 href属性

1. [代码]javascript 简单的search    <script(?:(?:\s|.)+?)src=[\"\'](.+?)[\"\'](?!\<)(?:(?:\s|.)*?)(?:(?:\/\>)|(?:\>\s*?\<\/script\>)) <script  src="sdfsdf/sdfd.js"          type="text/javascript"  /><scr

web基础----&gt;script标签的特殊使用

今天周末,首先祝大家过得开心.好了,今天要讲的就是怎样使用<script>去请求一个servlet,加载一些js资源以及额外的逻辑处理: 目录: JS的引入的几种方式 在script的标签中引入Servlet 动态引入JS的好处 友情链接 JS的引入方式 首先我们说一下,一般js引入到jsp或者html的几种方式: 直接document.write 但这样会把当前的页面全覆写掉 document.write("<script src='test.js'><\/scr

动态script标签同步加载 ps:无打包编译,静态实现静态资源入口动态配置,无编译打包静态资源添加版本号

/**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的文件信息注意,由于css是后来加载的,所以页面会存在无样式的页面骨架闪烁问题,可以在头部head标签里加个body{opacity:0},在css文件中再改为body{opacity:1} */ function noAsyncScriptTag() { var obj = { pubPath: "

js中的script标签

在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址"></script>),浏览器在渲染页面的时候,当读取到script元素时,浏览器不会以HTML或XHTML的方式处理其内容,浏览器会通知浏览器的脚本引擎来接管script元素中的内容.   script元素的type属性定义脚本类型,type类型有: 1.text/ecmascript(表示以ECMA

HTML 5 &lt;script&gt; 标签

HTML 4.01 与 HTML 5 之间的差异 async 属性是 HTML 5 中的新属性. 在 HTML 5 中,不再支持 HTML 4.01 中的一些属性. 提示和注释 注释:脚本按照如下方式执行: 如果 async 属性为 true,则脚本会相对于文档的其余部分异步执行,这样脚本会在页面继续解析的过程中执行. 如果 async 属性为 false,而 defer 属性为 true,则脚本会在页面完成解析后执行. 如果 async 和 defer 属性均为 false,那么脚本会立即执行

关于&lt;Script&gt;标签在html页面放置位置

一般script标签会被放在头部或尾部.头部就是<head></head>里面,尾部一般指<body></body>里,但也有放在</body>闭合标签之后的.究竟这些位置不同有什么不一样呢?下面我来详细说一下:1.<script></script>标签放置在<head></head>标签内部时: 将script放在<head>里,浏览器解析HTML,发现script标签时,会先下载完所

script标签中的async和defer

在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. javascript的内容同样可在外部进行引用,如下图所示,正常情况下执行结果和上面的内容相同,但当我们给html的script标签中加入async或者defer属性时,代码的执行过程也将会随之改变. async 为异步,顾名思义就是多个人同时做多件事,这里区分sync,sync为同步,就是一个人有序的

javascript基础语法(简介、script标签、严格模式、保留字关键字)

[简介][1]定义:一种专为与网页交互而设计的脚本语言,也就是解释型编程语言.[2]组成: [2.1]ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会) [2.2]DOM文档对象模型,提供访问和操作网页内容的方法的接口 [2.3]BOM浏览器对象模型,提供与浏览器交互的方法的接口 [script标签] [1]使用方式:引入外部文件和在页面内嵌入js代码[2]注意:带有src属性的<script>元素不应该在其<script>标签之间再包含