HTML插入音頻和視頻:audio和video標簽及其屬性


一、上傳到第三方網站,然后引入例如視頻上傳到優酷網,然后得到代碼

<iframe height=498 width=510 src='http://player.youku.com/embed/XMTg1MjAzMTUwMA==' frameborder=0 'allowfullscreen'></iframe>

二、audio 標簽定義聲音,比如音樂或其他音頻流。

1.audio支持三種音頻格式ogg、mp3、wav,為了兼容性考慮,一般會引入其中的兩種格式

2.屬性:

autoplay 如果出現該屬性,則音頻在就緒后馬上播放。(注:可以autoplay=“autoplay”這種寫法,也可以直接寫autoplay)

controls 如果出現該屬性,則向用戶顯示控件,比如播放按鈕。(注:可以controls=“controls”這種寫法,也可以直接寫controls)

loop 如果出現該屬性,則每當音頻結束時重新開始播放。(注:可以loop=“loop”這種寫法,也可以直接寫loop)

preload 如果出現該屬性,則音頻在頁面加載時進行加載,並預備播放。如果使用 "autoplay",則忽略該屬性。(load、auto、meta、none)

src 要播放的音頻的 URL。(可以和列子一樣的寫法,引入source單標簽)

3.下面是在Firefox瀏覽器的顯示風格,其他瀏覽器顯示風格不一樣,可以通過css統一格式

4.可以在開始標簽和結束標簽之間放置文本內容,這樣老的瀏覽器就可以顯示出不支持該標簽的信息。

<audio controls autoplay loop>
        <source src="/i/horse.ogg">
        <source src="/i/horse.mp3">
        <source src="/i/horse.wav">
您的瀏覽器不支持 video 標簽
</audio>

三、<video> 標簽定義視頻,比如電影片段或其他視頻流。

1.video支持三種音頻格式ogg、mp4、webm,為了兼容性考慮,一般會引入其中的兩種格式

2.屬性:

autoplay 如果出現該屬性,則視頻在就緒后馬上播放。(注:可以autoplay=“autoplay”這種寫法,也可以直接寫autoplay)

controls 如果出現該屬性,則向用戶顯示控件,比如播放按鈕。(注:可以controls=“controls”這種寫法,也可以直接寫controls)

loop 如果出現該屬性,則當媒介文件完成播放后再次開始播放。(注:可以loop=“loop”這種寫法,也可以直接寫loop)

preload 如果出現該屬性,則視頻在頁面加載時進行加載,並預備播放。如果使用 "autoplay",則忽略該屬性。(load、auto、meta、none)

src要播放的視頻的 URL。(可以和列子一樣的寫法,引入source單標簽)

width和height 設置視頻播放器的寬度和高度。

3.下面是在Firefox瀏覽器的顯示風格,其他瀏覽器顯示風格不一樣,可以通過css統一格式

4.可以在開始標簽和結束標簽之間放置文本內容,這樣老的瀏覽器就可以顯示出不支持該標簽的信息。

<video controls autoplay loop>
            <source src="/i/movie.ogg">
            <source src="/i/movie.mp4">
            <source src="/i/movie.webm">
            您的瀏覽器不支持 video 標簽!
</video>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM