音訊和視訊的插入
阿新 • • 發佈：2021-10-16
E8以上的用audio,IE8或者以下都用embed
audio:
該標籤含有的屬性
src 引入檔案的路徑
controls 是否對使用者開啟許可權，讓使用者獲得一個音訊播放的操作
loop 開啟迴圈播放
autoplay 開啟自動播放
程式碼示範： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mp3音訊</title> </head> <body> <h1>不要動！！！！！！</h1> <!-- 音訊檔案 --> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201811%2F18%2F20181118205113_lffkt.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636731875&t=31473b6ce6a6188ffd3c3f71cafacc81"alt="童年"> <!-- 可以不直接指定路徑，在標籤指定多個source可以很好的解決瀏覽 器相容性的問題。 --> <audio controls loop> <!-- 支援IE8以上的 --> <source src="./source/張磊 - 尋 (Live).mp3"> <!-- 支援IE8及以下 --> <embed src="./source/張磊 - 尋 (Live).mp3"type="audio/mp3"> </audio> </body> </html>
視訊引入標籤
使用video標籤和audio大致一樣
程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd317144d3c9c4bb53b663ead9a9ebe8a5818a5cc1d2d96-Q4ZkBx_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636787160&t=43c32de0246ad3ea07326eb914e2def6" alt=""> <br><br><br><br><br> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F941ce32d341704d3e501e24503eedc99afe9e7b94af1a-Y6Pwe3_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636787206&t=bce79b3709509f55f8d0540d8b271945" alt=""> <!-- <video controls> <source src="../html/source/1-1認識主機及基本外設.mp4"> <embed src="../html/source/1-1認識主機及基本外設.mp4" type="video/mp4"> </video> --> <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=d0040cqqgtz" allowFullScreen="true" width="500" height="500"></iframe> </body> </html>