iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
自我挑戰組

從零開始前端學習(HTML、CSS、JavaScript) 系列 第 21

Day 21 HTML5 <HTML5 多媒體標籤>

多媒體標籤可以很方便的在頁面中嵌入音頻和視頻,而不用去使用flash和其他瀏覽器的插件,多媒體標籤主要分為視頻標籤、音頻標籤

1.視頻標籤

<video>

當前<video>元素支持MP4、Ogg、WebM三種視頻格式,考慮到各種瀏覽器的相容性
盡量使用mp4格式。

語法 :

css
<video src = "文件地址" controls = "controls"> </video>
<video controls="controls" width="300">
<source src="media/mi_video_show.mp4" type="video/egg">
<source src="media/mi_video_show.mp4" type="video/mp4">
</video>

視頻標籤常用屬性

<!-- 
    autoplay     ---     視頻自動撥放
    controls     ---     顯示播放操作件
    width        ---     設置播放器寬度
    heigth       ---     設置播放器高度
    loop         ---     設置是否循環撥放
    preload      ---     是否預先加載視頻(auto預先加載/none不預先加載)
    src          ---     視頻URL地址
    poster       ---     設置加載等待的畫面圖面
    muted        ---     靜音撥放
 -->

2.音頻標籤

<audio>

<audio>元素支持MP3、Wav、Ogg三種音頻格式,考慮到各種瀏覽器的相容性
盡量使用mp3格式。

語法 :
<audio src = "文件地址" controls="controls"></audio>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

音頻標籤常用屬性

<!-- 
autoplay       ---     音頻就緒後自動撥放
controls       ---     顯示播放操作件
loop           ---     設置是否循環撥放
src            ---     音頻URL地址
-->

備註 : google瀏覽器把音頻和視頻自動撥放禁止需要使用JS解決


上一篇
Day 20 CSS & HTML5 <CSS的初始化 & HTML5 新增的語意化標籤>
下一篇
Day 22 HTML5 <HTML5 input類型、表單標籤>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言