html5 新增媒體標簽詳解 音頻 視頻 標記定義圖片 標記定義外部可交互內容或者插件 標記定義圖片媒體資源

html5 變得更加簡潔易用，新增了不少結構標簽 比如<article> 標記一篇文章   <header> 定義頭部 <footer> 定義底部  <nav> 定義導航  <section> 定義一個區域  <aside> 定義側邊欄 <hgroup> 標記定義文件夾一個區塊的相關信息 

同時也新增了 <audio><vedio><source>  下面我們就來詳細的講解一下這三個媒體標簽的作用，

<audio> 音頻標簽

 

　　

<div>
        <audio src="./image/YourBody.mp3"  id="music" autoplay="autoplay" controls="controls" loop="3">
            您的瀏覽器不支持播放音樂
        </audio>
    </div>
    <div id="player"> 點我播放</div>


<script>

   $("#player").bind("click",function () {
       let uploadMusic = $("#music")[0]; /*jquery對象轉換成js對象*/
       if (uploadMusic.paused) {
           /*如果已經暫停*/
           uploadMusic.play();/*播放*/
       } else {
           uploadMusic.pause();/*暫停*/
       }
   });
</script>

 

 

 如上所示 <audio> 標簽 中  autoplay 是是否自動播放     controls=是顯示控制面板，loop是播放完成后循環幾次

 標簽里加了id 表示可以通過js來控制音頻播放，js代碼如上。

如果不加control 音頻則無法播放，即使設置了自動播放也不起作用

實際效果如下 

 

 

 但是我們的音樂后綴又不僅僅是 。MP3 有很多種格式 ， 這個時候就要加另外一個標簽了 如下 

 

<audio autoplay="autoplay" controls="controls">
    <source type="audio/mpeg" src="image/YourBody.mp3">
</audio>

 

 

 <video>  視頻標簽

<video src="./image/china%20blue.mkv" controls="controls" autoplay="autoplay"></video>

  與 <radio>    大同小異

  實際效果 如下 

 

 

可以添加寬度和高度 以及多種解碼方式 

<video  controls="controls" width="" height="">
    <source src="image/china%20blue.mkv" type="video/mp4">
</video>

當然需要自定義播放控制欄 這個是需要js參與的。

 

<embed   src      width   height >  可以加載flash文件   svg   也可以引入