首頁 > web前端 > H5教程 > HTML5中的音訊和視訊媒體播放元素小結_html5教學技巧

HTML5中的音訊和視訊媒體播放元素小結_html5教學技巧

WBOY
發布: 2016-05-16 15:45:57
原創
2219 人瀏覽過

音訊和視訊的編碼/解碼器是一組演算法,用來對一段特定的音訊或視訊串流進行編碼和解碼,以便音訊和視訊能夠播放。原始的媒體檔案體積非常大,假如不對其進行編碼,那麼構成一段視訊和音訊的資料可能會非常龐大,以至於在因特網上傳播需耗費無法忍受的時間。若沒有解碼器的話,接收方就無法把編碼過的資料重組為原始的媒體資料。編解碼器可以讀懂特定的容器格式,並且對其中的音訊軌道和視訊軌道解碼。
理解媒體元素
1、基本操作:聲明媒體元素

XML/HTML Code複製內容到剪貼簿
  1. audio controls src="Adele-Set Fire To The Rain.mp3">  
  2. 您所使用的瀏覽器不支援HTML5 audio   
  3. audio>  

程式碼中的controls 特性是告訴瀏覽器顯示通用的使用者控件,包括開始、停止、跳播以及音量控制。如果不指定controls屬性,使用者將無法播放頁面上的音訊。
2、使用source元素
最簡單的情況下,src屬性直接指向媒體檔案就可以了,但是,萬一瀏覽器不支援相關容器或編碼器呢?這就需要用到備用聲明了。備用聲明中可以包含多種來源,瀏覽器可以從這麼多的來源中進行選擇:

XML/HTML Code複製內容到剪貼簿
  1. audio controls> >
  2.   source  src=
  3. src
  4. =src= >   source
  5.   src=src=src
=

 
>
  

函数 动作
load() 加载音频/视频文件,为播放做准备,通常情况下不必调用,除非是动态生成的元素。用来在播放前预加载。
play() 加载(有必要的话)并播放音频/视频文件。除非音频/视频已经暂停在其他位置了,否则默认从头开始播放
pause() 暂停处于播放状态的音频/视频文件
canPlayType(type) 测试video元素是否支持给定MIME类型的文件
audio>   對於來源,瀏覽器會依照聲明順序判斷,如果支援的不只一種,那麼瀏覽器會選擇支援的第一個來源。 3、媒體的控制在audio元素或video元素中透過設定特性autoplay,不需要任何使用者交互,音訊或視訊檔案就會在載入完成後自動播放。 常用的控制函數
唯讀的媒體特性
只读特性
duration 整个媒体文件的播放时长,以s为单位。如果无法获取时长,则返回NaN。
paused 如果媒体文件当前被暂停,则返回true。如果还未开始播放,则返回false。
ended 如果媒体文件已经播放完毕,则返回true
startTime 返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
error 在发生了错误的情况下返回的错误代码
currentSrc 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件。

可腳本控制的特性值
特性
autoplay 将媒体文件设置为创建后自动播放,或者查询是否已设置为autoplay
loop 如果媒体文件播放完毕后能重新播放则返回true,或者将媒体文件设置为循环播放(或者不循环播放)
currentTime 以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置
controls 显示或隐藏用户控制界面,或者查询用户控制界面当前是否可见
volume 在0.0到1.0之间设置音频音量的相对值,或者查询当前音量的相对值。
muted 为音频文件设置静音或者消除静音,或者渐层当前是否为静音
autobuffer 通知播放器在媒体文件开始播放前,是否进行缓冲加载。如果媒体文件已经设置为autoplay,则忽略测特性。

3.1使用audio和video元素
HTML5 video元素同audio元素非常類似,只是比audio元素多了一些特性。
特性
poster 在视频加载完成之前,代表视频内容的图片的URL地址,可以想象一下“电影海报”。该特性不仅可读,而且可以修改,以便更换图片
width、height 读取或设置显示尺寸。如果设置的宽度与视频本身大小不匹配,可能导致居中显示,上下或左右可能出现黑色条状区域。
videoWidth、videoHeight 返回视频固有的或自适应的宽度和高度。只读video元素还有一个audio元素不支持的关键特性:可被HTML5 Canvas的函数调用。

提示:當canvas使用影片作為繪製來源時,畫出來的只是目前播放的畫面。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板