WEB前端第七課——視頻、音頻、圖形

時間 2020-08-02

標籤 web 前端第七視頻音頻圖形欄目 HTML 简体版

原文原文鏈接

1.<video></video>css

　　用於定義視頻，如影視片斷html

　　語法<video src="XXXmovie.mp4" controls></video>web

　　支持視頻格式：mp四、ogg移動端、webM高清canvas

　　經常使用屬性：瀏覽器

　　　　　　src，視頻的地址urlide

　　　　　　autoplay，視頻就緒後自動播放oop

　　　　　　controls，向用戶顯示播放器控件post

　　　　　　width，設置視頻的播放器的寬度測試

　　　　　　height，設置視頻的播放器的高度動畫

　　　　　　loop，定義自動循環播放，默認無限循環，屬性值可設置次數

　　　　　　muted，定義音頻輸出默認爲靜音

　　　　　　poster，設定視頻下載時顯示的圖像，或在用戶點擊播放按鈕前顯示的圖像，值爲url

　　　　　　preload，視頻在頁面加載時進行加在，並預備播放，若是使用「autoplay」則忽略該屬性

2.<audio></audio>

　　用於定義聲音，如音樂

　　語法<audio src="xxxmusic.mp3" autoplay></audio>

　　支持音頻格式：mp三、ogg、wav

　　經常使用屬性與video相似

　　　　　　src，視頻的地址url

　　　　　　autoplay，視頻就緒後自動播放

　　　　　　controls，向用戶顯示播放器控件

　　　　　　loop，定義自動循環播放，默認無限循環，屬性值可設置次數

　　　　　　muted，定義音頻輸出默認爲靜音

　　　　　　preload，視頻在頁面加載時進行加在，並預備播放，若是使用「autoplay」則忽略該屬性

3.<source></source>

　　爲媒介元素（如<video>和<audio>）定義媒介資源

　　<source>容許設定可替換的視頻/音頻文件，供瀏覽器根據它對媒體類型或編碼器的支持進行選擇

　　語法示例：

    <audio>
        <source src="Getit.ogg">
        <source src="Getit.mp3">
    </audio>

4.<embed/>

　　用於定義嵌入的內容，如插件，也能夠用了嵌入聲音

　　語法<embed src=""/>，必須設置src屬性

5.<canvas></canvas>

　　canvas是一個容器（畫布），能夠經過控制座標在canvas上繪製圖形，通常配合js使用能實現很是複雜的動畫效果

　　canvas擁有多種繪製路徑、矩形、圓形等，能夠控制區域內每個像素

　　語法示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畫布測試</title>
    <!-- 經過css設置背景顏色 -->
    <style type="text/css">
        canvas{
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <!--建立畫布，默認爲無色填充的一個矩形區域-->
    <canvas id="canvastest" width="600" height="600">
        您的瀏覽器版本太低，不支持canvas！
    </canvas>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。