音頻和視頻的插入


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>

 


免責聲明!

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



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