【亚洲必赢官网】表明他俩的含义,HTML五多媒体笔记

【亚洲必赢官网】表明他俩的含义,HTML五多媒体笔记。一:<canvas>标签   定义图形、图像,是基于javascript的绘图API

Internet Explorer 浏览器难题

标题:Internet Explorer 八 及更早 IE 版本的浏览器不帮忙HTML伍的章程。

<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

涸泽而渔:html伍shiv.js 引用代码必须放在 <head> 成分中,先加载该文件。


多媒体成分

摘要:

  在HTML伍产出以前,web媒体超越一半透过Flash来落成。那种办法产生了文件大加载慢,影响网址性能,开荒难度高,维护麻烦,不易增添等。那就招致HTML伍要好开班辅助媒体功能。HTML伍DOM 为 <audio> 和 <video> 成分提供了点子、属性和事件。

贰:<video>标签   定义录像

HTML5 新元素

壹.一Web 上的点子

直到现在,还是不设有一项目的在于网页上播放音频的行业内部。

明日,大很多旋律是因而插件(比方Flash)来播音的。然则,并非全部浏览器都具有一样的插件。

HTML伍 规定了1种通过 audio 成分来含有音频的正儿八经措施。

audio 成分能够播放声音文件也许音频流。

浏览器:

亚洲必赢官网 1

从IE玖已经先导支持audio和video标签。

三:<audio>标签  定义音频内容

<canvas> 新元素

<canvas>标签:定义图形,比方图片和别的图像。该标签基于
JavaScript 的绘图 API

一.贰 HTML 五<audio>音频标签的定义和用法:

<audio>标签定义声音,比如音乐或其余音频流。

Audio:

  <audio> 标签定义声音,比如音乐或别的音频流。

四:<source>标签 定义多媒体资源 如:<video>、<audio>

新多媒体成分

<audio> 标签:定义音频内容
<video> 标签:定义摄像(video 只怕 movie)
<source>标签: 定义多媒体财富 <video> 和 <audio>
<embed> 标签:定义嵌入的剧情,比如插件。
<track> 标签:为诸如 <video> 和 <audio>
成分之类的媒婆规定外部文本轨道。

标签

HTML 四.0一 与 HTML 五 之间的差距:<audio>标签是 HTML 伍 的新标签。

音频格式:

   IE9  Firefox3.5  Opera10.5  Chrome3.0  Safari3.0
 Ogg Vorbis    √  √  √  
 Mp3    √      √  √
 Wav    √  √    √

 

五:<embed>标签  定义嵌入的始末 比如插件等。

新表单成分

<datalist>标签: 定义选项列表。请与 input
成分合营使用该因素,来定义 input 或然的值。
<keygen> 标签:规定用于表单的密钥对生成器字段。
<output> 标签:定义区别类其余输出,举个例子脚本的输出。

<audio>标签的用法:

<audio src=”/i/horse.ogg” controls=”controls”>

      Your browser does not support the audio element。

</audio>

实例:

<audio src=”song.ogg” controls=”controls”>
  您的浏览器不协理 audio 标签。
</audio>

设若浏览器不协理audio标签将会来得文本内容。为了扶助各种浏览器,能够加载多样格式的音频文件,浏览器会播放本身分辨的音频文件

<audio controls>
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
</audio>

新的语义和协会成分

 

<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

一.三HTML 伍 <audio>标签的质量:

亚洲必赢官网 2

属性:

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。

壹.四 HTML 5<audio>辅助的节拍

Video:

  <video> 标签定义视屏文件。

音频格式

脚下,audio 成分协助两种音频格式:

亚洲必赢官网 3

录像格式:

   IE9  Firefox3.5  Opera10.5  Chrome5.0  Safari3.0
Ogg    √  √  √  
MPEG 4    √      √  √
WebM    √(4.0)  √(10.6)  √(6.0)  

1.5HTML 五 <video>摄像标签的定义和用法:

<video>标签定义录制,举个例子电影片段或任何摄像流。

实例:

<video src=”movie.ogg” controls=”controls”>
  您的浏览器不支持 video 标签。
</video>

假如浏览器不帮助audio标签将会显得文本内容。为了帮衬各种浏览器,能够加载各类格式的视屏文件,浏览器会播放自身辨认的摄像文件

<video controls=”controls” width=”500″ height=”500″
autoplay=”autoplay” loop=”loop” poster=”PLMM.jpg”>
  <source src=”movie.ogg” type=”video/ogg” />
  <source src=”movie.webm” type=”video/webm” />
  您的浏览器不支持 video 标签。
</video>

<video>标签的用法:

<video src=”/i/movie.ogg” controls=”controls”>

    your browser does not support the video tag

</video>

属性:

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

而且也援助全局属性

HTML 四.0一 与 HTML 伍 之间的歧异

<video>标签是 HTML 5 的新标签。

事件:

属性 描述
onabort script 在退出时运行的脚本。
oncanplay script 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange script 当媒介长度改变时运行的脚本。
onemptied script 当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。
onended script 当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
onerror script 当在文件加载期间发生错误时运行的脚本。
onloadeddata script 当媒介数据已加载时运行的脚本。
onloadedmetadata script 当元数据(比如分辨率和时长)被加载时运行的脚本。
onloadstart script 在文件开始加载且未实际加载任何数据前运行的脚本。
onpause script 当媒介被用户或程序暂停时运行的脚本。
onplay script 当媒介已就绪可以开始播放时运行的脚本。
onplaying script 当媒介已开始播放时运行的脚本。
onprogress script 当浏览器正在获取媒介数据时运行的脚本。
onratechange script 每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。
onreadystatechange script 每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。
onseeked script 当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。
onseeking script 当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。
onstalled script 在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend script 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate script 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onvolumechange script 每当音量改变时(包括将音量设置为静音)时运行的脚本。
onwaiting script 当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本

一.6HTML 五 <video>录制标签的性质:

亚洲必赢官网 4

Demo:

  上面那些实例重新定义了录像的暂停、播放、快进、快退等形式。项目中得以参照

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5     </head>
 6     <body>
 7         <video src="movie.webm" controls="controls" poster="PLMM.jpg" width="550px" height="300px" id="video">
 8             您的浏览器不支持 video 标签。
 9         </video>
10         <br />
11         <button onclick="bofang()">播放</button>
12         <button onclick="zanting()">暂停</button>
13         <button onclick="kuaijin()">快进10秒</button>
14         <button onclick="kuaitui()">快退10秒</button>
15         <button onclick="shutup(this)">闭嘴</button>
16         <button onclick="soso()">加速播放</button>
17         <button onclick="yu()">减速播放</button>
18         <button onclick="normal()">正常播放</button>
19         <button onclick="upper()">提高嗓门</button>
20         <button onclick="lower()">降低嗓门</button>
21         <script>
22             //获取对应的video标签
23             var video=document.getElementById('video');
24             //播放方法
25             function bofang(){
26                 video.play();
27             }
28             //暂停方法
29             function zanting(){
30                 video.pause();
31             }
32             //快进10秒
33             function kuaijin(){
34                 video.currentTime+=10;
35             }
36             //快退10秒
37             function kuaitui(){
38                 video.currentTime-=10;
39             }
40             //静音按钮
41             function shutup(obj){
42                 if(video.muted){
43                     obj.innerHTML="闭嘴";
44                     video.muted=false;
45                 }else{
46                     obj.innerHTML="张嘴";
47                     video.muted=true;
48                 }
49             }
50             //加速播放(3倍速度)
51             function soso(){
52                 video.playbackRate=3;
53             }
54             //慢速播放(慢三倍)
55             function yu(){
56                 video.playbackRate=1/3;
57             }
58             //正常倍速
59             function normal(){
60                 video.playbackRate=1;//默认的播放倍速是1
61             }
62             //调高声音
63             function upper(){
64                 video.volume+=0.2;//声音值的范围是0-1
65             }
66             //调低声音
67             function lower(){
68                 video.volume-=0.2;
69             }
70         </script>
71     </body>
72 </html>

 

成效如下:

亚洲必赢官网 5

 

1.7 HTML 5 Audio/Video 属性

亚洲必赢官网 6

Audio/Video 属性

附录:

 

1.8 HTML 5 Audio/Video 方法:

亚洲必赢官网 7

Audio/Video 方法

HTML5 Audio/Video 方法

方法 描述
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频

1.9HTML5 Audio/Video 事件:

亚洲必赢官网 8

Audio/Video 事件

亚洲必赢官网,HTML5 Audio/Video 属性

属性 描述
audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置(以秒计)
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度(以秒计)
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量

壹.10 摄像格式与浏览器的支撑

Ogg = 带有 西奥ra 录制编码和 Vorbis 音频编码的 Ogg 文件。

MPEG四 = 带有 H.26四 录制编码和 AAC 音频编码的 MPEG 四 文件。

WebM = 带有 VP八 录像编码和 Vorbis 音频编码的 WebM 文件。

标签是 HTML 伍 的新标签。

标签是 HTML 伍 的新标签。

HTML5 Audio/Video 事件

事件 描述
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据,但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止

 

网站地图xml地图