HTML5的多媒体

在html5中新增了两个多媒体标签

audio音频标签
video视频标签

语法格式

在语法格式上，音频与视频，大致相同
（无法正常播放）

 <video src=""></video><audio src=""></audio>

往src里填写视频/音频路径即可，但是这时候会显示一个图片，不会进行播放，也没办法操控播放，这是因为我们还没有使用任何的控制组件。

正确可使用方式：

 <audio id="" src="1.mp3" controls></audio><video id="" src="./1.mp4" controls="controls" width="300px"></video>

controls属性表示使用浏览器自带控制条，通常自带播放、暂停等按钮。
controls的完全写法应该是controls="controls"，也可以简写成 controls

谷歌浏览器实测：

IE浏览器实测：

突然觉得谷歌好圆润，符合我的审美，nice

多媒体的其他属性

autoplay（自动播放，autoplay="autoplay"，可简写为 autoplay ）
perload（预加载，提高播放速度，属性值none、metadata、auto）
poster(video独有，如果播放失败时展示一幅图片代替，属性值即为图片地址)
loop（循环播放，loop="loop"，可简写为loop）
width、height（设置窗口的大小）
currentsrc（只读属性，返回媒体的URL地址）
played、paused、ended（已经播放的时间段、是否暂停、是否播放完毕）
volume、muted（音量、静音）

在perload中，none表示不预先加载，metadata表示预先加载元数据（字节数、第一帧、时间等）

paused和ended返回的是布尔值，true表示已暂停/已结束，false表示未暂停/未结束

volume表示音量，属性值1-0，1表示100%，0表示0%
muted表示静音，属性值为布尔值，true表示静音，false表示未静音

多媒体的方法

无论是音频还是视频，都存在三种方法，播放、暂停、重新载入

播放 play()
暂停 pause()
重新载入 load()

<video id="xsx" src="./1.mp4" controls="controls" preload="auto" muted="true" autoplay="autoplay" preload="auto" width="300px" loop="loop"></video><input type="button" value="播放" onclick=play()><input type="button" value="暂停" onclick=pause()><input type="button" value="重新加载" onclick=load()><script>var x = document.getElementById('xsx')function play(){x.play()console.log("播放")}function pause(){x.pause()console.log("暂停")}function load(){x.load()console.log("重新加载")}</script>

HTML+CSS+JavaScript复习笔记持更（四）——多媒体篇相关推荐

HTML+CSS+JavaScript复习笔记持更（一）——标签篇
前言博主现在还是在校生,目前大三,突然想起HTML的很多基础都忘记的差不多了,于是买了几本基础书,创建这篇博文用于记录复习笔记,也希望我自己在整理的时候,能帮助大家加深一些基础知识的印象,本篇博文将 ...
HTML+CSS+JavaScript复习笔记持更（九）——CSS3常用属性之盒模型
盒模型盒模型是CSS中最最重要的概念之一了,这个概念比较抽象,它规定了元素框处理元素内容.外边距.内边距.边框的方式. 内.外边距的属性内边距:padding 外边距:margin 边框:bord ...
HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表
列表属性之前已经介绍过了列表标签.主要有有序列表和无序列表,为了更好地控制这两种列表,CSS还提供了这两种列表的样式设置. list-style(简写属性,把所有列表的属性设置写到一个声明中) li ...
HTML+CSS+JavaScript复习笔记持更（六）——CSS3常用属性之文本
文本相关文本相关,包含了文字样式和文本换行等格式文字文字是一个网页最基础的部分,文字主要有以下几种属性: 字体文字大小文字颜色水平对齐方式段首缩进方式语法格式: <!DOCTYP ...
HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器
CSS选择器在一个页面中,必不可少的就是css样式,css样式全都写在style标签中,在使用css时,我们可以用的css选择器非常之多,所以css选择器的分类也很多,但是基本上可以统计分为两类:基 ...
HTML+CSS+JavaScript复习笔记持更（十）——CSS3常用属性之定位
定位定位主要是用来设定元素在页面上的位置的,其代码为:position 定位有三种定位方式: static(无特殊定位,按照dom排序) absolute(绝对定位,往前面找最近的,有定位属性的元素 ...
HTML+CSS+JavaScript复习笔记持更（七）——CSS3常用属性之背景
背景设置 HTML页面中的背景是通过background设置的. 语法格式: <!DOCTYPE html> <html lang="en"> <he ...
HTML+CSS+JavaScript复习笔记持更（三）——表单篇
表单表单概述表单简介 form 标签输入标签文本框语法格式单选框和复选框语法格式按钮语法格式图像域和文件域语法格式文本域语法格式菜单/列表语法格式表单概述表单在网页中 ...
HTML+CSS+JavaScript复习笔记持更（二）——列表篇
列表无序列表标签写法属性有序列表标签写法属性列表嵌套定义列表的嵌套有序列表和无序列表的嵌套列表在html中至关重要,通常用于各种分类页面,以某宝为例,其主页面有大部分涉及到列表(绿 ...

HTML+CSS+JavaScript复习笔记持更（四）——多媒体篇

HTML5的多媒体

语法格式

多媒体的其他属性

多媒体的方法

HTML+CSS+JavaScript复习笔记持更（四）——多媒体篇相关推荐

最新文章

热门文章