媒體資源 · Magic_sword2

[TOC] # 簡介說明 ``` 版本：HTML5媒體資源作用：HTML5媒體資源 ``` # 媒體資源 # \<picture\> ***** 包含零或多個img元素 ### 示例內容 1. 舉例說明 ``` <picture> <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)"> <img src="/media/examples/painted-hand-298-332.jpg" /> </picture> ``` # ~~[aba]-\<bgsound\>~~ ***** IE瀏覽器中設置網頁背景音樂的元素 # \<audio\> ***** 定義音頻內容 ### 參數說明 autoplay: * 類型：字符串 * 默認值：無 * 描述：如果出現該屬性，則音頻在就緒后馬上播放 * 可選值：[ ] controls: * 類型：字符串 * 默認值：無 * 描述：如果出現該屬性，則向用戶顯示控件，比如播放按鈕 * 可選值：[ ] loop: * 類型：字符串 * 默認值：無 * 描述：如果出現該屬性，則每當音頻結束時重新開始播放 * 可選值：[ ] muted: * 類型：字符串 * 默認值：無 * 描述：規定視頻輸出應該被靜音 * 可選值：[ ] preload: * 類型：字符串 * 默認值：auto * 描述：如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性 * 可選值：[ none | metadata | auto ] src: * 類型：字符串 * 默認值：無 * 描述：要播放的音頻的 URL * 可選值：[ ] crossorigin: * 類型：字符串 * 默認值：無 * 描述：該枚舉屬性指明抓取相關圖片是否必須用到CORS（跨域資源共享） * 可選值：[ anonymous | use-credentials ] ### *常見的音頻編解碼器 | 編解碼器名稱（簡稱） | 完整的編解碼器名稱 | 支持的容器（文件類型） | |------------|--------------------------------|----------------------| | AAC | 高級音頻編碼 | MP4, ADTS, 3GP | | ALAC | 蘋果無損音頻編解碼器 | MP4, QuickTime(MOV) | | AMR | 自適應多速率 | 3GP | | FLAC | 無損音頻編解碼器 | MP4, OGG, FLAC | | G.711 | 語音頻率的脈沖編碼調制(PCM) | RTP / WebRTC | | G.722 | 7 kHz音頻編碼在64 Kbps內(用于電話/ VoIP) | RTP / WebRTC | | MP3 | MPEG-1音頻層III | MP4, ADTS, MPEG, 3GP | | Opus | Opus | WebM, MP4, OGG | | Vorbis | Vorbis | WebM, OGG | ### *偽類元素 1. 舉例說明 ``` audio::-webkit-media-controls-panel audio::-webkit-media-controls-mute-button audio::-webkit-media-controls-play-button audio::-webkit-media-controls-timeline-container audio::-webkit-media-controls-current-time-display audio::-webkit-media-controls-time-remaining-display audio::-webkit-media-controls-timeline audio::-webkit-media-controls-volume-slider-container audio::-webkit-media-controls-volume-slider audio::-webkit-media-controls-seek-back-button audio::-webkit-media-controls-seek-forward-button audio::-webkit-media-controls-fullscreen-button audio::-webkit-media-controls-rewind-button audio::-webkit-media-controls-return-to-realtime-button audio::-webkit-media-controls-toggle-closed-captions-button ``` # \<video\> ***** video 標簽定義視頻，比如電影片段或其他視頻流 ### 參數說明 autoplay: * 類型：字符串 * 默認值：無 * 描述：如果出現該屬性，則音頻在就緒后馬上播放 * 可選值：[ ] controls: * 類型：字符串 * 默認值：無 * 描述：如果出現該屬性，則向用戶顯示控件，比如播放按鈕 * 可選值：[ ] [fut]-controlslist: * 類型：字符串 * 默認值：無 * 描述：當瀏覽器顯示自己的控件集(例如，當指定了Controls屬性時)，Controlslist屬性將幫助瀏覽器選擇在媒體元素上顯示的控件 * 可選值：[ nodownload | nofullscreen | noremoteplayback ] width: * 類型：字符串 * 默認值：無 * 描述：設置視頻播放器的寬度 * 可選值：[ ] height: * 類型：字符串 * 默認值：無 * 描述：設置視頻播放器的高度 * 可選值：[ ] loop: * 類型：字符串 * 默認值：無 * 描述：如果出現該屬性，則每當音頻結束時重新開始播放 * 可選值：[ ] poster: * 類型：字符串 * 默認值：無 * 描述：規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像 * 可選值：[ ] muted: * 類型：字符串 * 默認值：無 * 描述：規定視頻輸出應該被靜音 * 可選值：[ ] preload: * 類型：字符串 * 默認值：auto * 描述：如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放，如果使用 "autoplay"，則忽略該屬性 * 可選值：[ none | metadata | auto ] src: * 類型：字符串 * 默認值：無 * 描述：要播放的音頻的 URL * 可選值：[ ] [fut]-disablePictureInPicture: * 類型：字符串 * 默認值：無 * 描述：禁用畫中畫 * 可選值：[ true ] [fut]-disableRemotePlayback: * 類型：字符串 * 默認值：無 * 描述：用于禁用使用有線連接的設備(HDMI、DVI等)的遠程播放功能 * 可選值：[ true ] ### *常見的視頻編解碼器 | 編解碼器簡稱 | 編解碼器全稱 | 容器支持 | |--------------|---------------------------------------------|--------------------| | AV1 | AOMedia Video 1 | MP4、WebM | | AVC (H.264) | Advanced Video Coding（高級視頻編碼器） | 3GP、MP4 | | H.263 | H.263 Video | 3GP | | HEVC (H.265) | High Efficiency Video Coding（高效視頻編碼） | MP4 | | MP4V-ES | MPEG-4 Video Elemental Stream（MPEG-4 視頻元素流） | 3GP、MP4 | | MPEG-1 | MPEG-1 Part 2 Visual | MPEG、QuickTime | | MPEG-2 | MPEG-2 Part 2 Visual | MP4、MPEG、QuickTime | | Theora | Theora | Ogg | | VP8 | Video Processor 8 | 3GP、Ogg、WebM | | VP9 | Video Processor 9 | MP4、Ogg、WebM | ### *注意事項 1. 編碼兼容 ![webvideo編碼兼容](https://img.kancloud.cn/3f/fd/3ffd48a40906f8db49053bc76ebd5bc4_2340x1080.jpg) # \<source\> ***** \<source\> 標簽為媒介元素（比如 \<video\> 和 \<audio\>）定義媒介資源 # [fut]-\<track\> ***** \<track\> 標簽為諸如 video 元素之類的媒介規定外部文本軌道，如字幕文件 ### 參數說明 srclang: * 類型：字符串 * 默認值：無 * 描述：指定語言 * 可選值：[ ] subtitles: * 類型：字符串 * 默認值：無 * 描述：字幕，不一定是翻譯，也可能是補充性說明 * 可選值：[ ] captions: * 類型：字符串 * 默認值：無 * 描述：報幕內容，可能包含演職員表等元信息，適合聽障人士或者沒有打開聲音的人了解音頻內容 * 可選值：[ ] descriptions: * 類型：字符串 * 默認值：無 * 描述：視頻描述信息，適合視障人士或者沒有視頻播放功能的終端打開視頻時了解視頻內容 * 可選值：[ ] chapters: * 類型：字符串 * 默認值：無 * 描述：用于瀏覽器視頻內容 * 可選值：[ ] metadata: * 類型：字符串 * 默認值：無 * 描述：給代碼提供的元信息，對普通用戶不可見 * 可選值：[ ] # \<map\> ***** 定義圖像映射 # \<area\> ***** 定義圖像映射內部的區域 ### 參數說明 shape: * 類型：字符串 * 默認值：無 * 描述：區域形狀 * 可選值：[ circle | rect ] coords: * 類型：字符串 * 默認值：無 * 描述：區域坐標，逗號分隔 * 可選值：[ ] 其它屬性: * 類型：字符串 * 默認值：無 * 描述：a標簽的所有屬性都可以用 * 可選值：[ ] # ~~[wild]-\<image\>~~ ***** 定義圖像 # \<img\> ***** 定義圖像 ### 參數說明 usemap: * 類型：字符串 * 默認值：無 * 描述：使用map標簽，創建熱點區域，這個值填#[map標簽name] * 可選值：[ ] srcset: * 類型：字符串 * 默認值：無 * 描述：提供了根據屏幕條件選取圖片的能力，但是其實更好的做法，是使用 picture 元素 * 可選值：[ ] sizes: * 類型：字符串 * 默認值：無 * 描述：定義圖片規格 * 可選值：[ ] ### *注意事項 1. 舉例說明 ``` 1. 避免基線對齊上方留白解決代碼：vertical-align:top ``` ### 示例內容 1. 舉例說明 ``` <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> ``` # \<canvas\> ***** 定義圖形，內聯標簽 ### 參數說明 width: * 類型：字符串 * 默認值：無 * 描述：畫布實際像素寬度 * 可選值：[ ] height: * 類型：字符串 * 默認值：無 * 描述：畫布實際像素高度 * 可選值：[ ] ### *注意事項 1. 舉例說明 ``` 1. 不要用CSS設置寬度和高度，會放大或縮小畫布 2. 當畫布大小改變，畫布內容會清空 ```