[TOC] ## audio和video ## Camera API 通過[Camera API](https://wiki.mozilla.org/Platform/Features/Camera_API),你可以使用手機的攝像頭拍照,然后把拍到的照片發送給當前網頁.這些操作主要是通過一個`input元素`來實現的,其中該元素的`type屬性必須為"file",accept屬性要允許圖片格式,`這樣才能知道這個文件選擇框是用來選擇圖片的.,完整的HTML結構看起來是這樣的: ``` <input type="file" id="take-picture" accept="image/*"> ``` 當用戶激活這個HTML元素的時候,系統會呈現給用戶一個選擇界面,其中一個選項是選擇本地的圖片文件,另一個選項是要通過攝像頭直接 拍攝照片作為所選文件.如果用戶選擇了攝像頭,則會進入手機的拍照模式.拍照結束后,,用戶可以選擇確定還是放棄.如果接受了,則該照片會作為所選文件發 送給那個`<input type="file">`元素,同時觸發該元素的`onchange事件`. ### 獲取到所拍攝照片的引用 通過[File API](https://developer.mozilla.org/en/Using_files_from_web_applications),你可以獲取到用戶所拍攝的照片或者所選擇的圖片文件的引用: ``` var takePicture = document.querySelector("#take-picture"); takePicture.onchange = function (event) { // 獲得圖片文件的引用 var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; } }; ``` ### 在網頁中展示圖片 如果你獲取到了那張照片的引用\(也就是File對象\),你就可以使用[`window.URL.createObjectURL()`](https://developer.mozilla.org/zh-CN/docs/DOM/window.URL.createObjectURL)方法創建一個指向那個照片的URL,然后把得到的URL賦給`img`元素的`src屬性`: ``` // 獲取到img元素 var showPicture = document.querySelector("#show-picture"); // 獲取到window.URL對象 var URL = window.URL || window.webkitURL; // 創建一個對象URL字符串 var imgURL = URL.createObjectURL(file); // 設置img元素的src屬性為那個URL showPicture.src = imgURL; // 釋放那個對象URL,提高性能 URL.revokeObjectURL(imgURL); ``` 如果瀏覽器不支持`createObjectURL()`方法,還可以使用[`FileReader`](https://developer.mozilla.org/zh-CN/docs/DOM/FileReader)來實現: ``` // 如果createObjectURL方法不可用 var fileReader = new FileReader(); fileReader.onload = function (event) { showPicture.src = event.target.result; }; fileReader.readAsDataURL(file); ``` ## Track 和 WebVTT **HTML**`<track>`**元素**被當作媒體元素—[`<audio>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio)和[`<video>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)的子元素來使用。它允許指定計時字幕（或者基于事件的數據），例如自動處理字幕。 `track`給媒體元素添加的數據的類型在`kind`屬性中設置，屬性值可以是`subtitles`,`captions`,`descriptions`,`chapters`或`metadata`。該元素指向當用戶請求額外的數據時瀏覽器公開的包含定時文本的源文件。 一個`media`元素的任意兩個`track`子元素不能有相同的`kind`,`srclang`, 和`label`屬性。 `default` 該屬性定義了該track應該啟用，除非用戶首選項指定了更合適一個track。每個媒體元素里面只有一個`track`元素可以有這個屬性。 `kind` 定義了 text track 應該如何使用。如果省略了該屬性，默認的 kind 值就是`subtitles` 。下面是允許的關鍵字： * `subtitles` * 字幕給觀影者看不懂的內容提供了翻譯。比如英文電影里非英文的對話框或者文字。 * 字幕可能包含額外的內容，通常有附加的背景信息。比如在電影星球大戰開頭的文字，或者某個場景的日期，時間，還有地點。 * captions * 隱藏式字幕提供了音頻的轉錄甚至是翻譯。 * 可能包含重要的非言語的信息，比如音樂提示或者音效。可以指定提示音的源文件 \(e.g. music, text, character\). * 適用于耳聾的用戶或者當調成靜音的時候。 * `descriptions` * 視頻內容的文本描述。 * 適用于失明用戶或者當視頻不可見的場景。 * `chapters` * 章節標題用于用戶瀏覽媒體資源的時候。 * `metadata` * 腳本使用的track。 對用戶不可見。 `label` 當列出可用的text tracks時，給瀏覽器使用的text track的標題，這種標題是用戶可讀的。`src`track的地址。必須是合法的URL。該屬性必須定義。 `srclang` track文本數據的語言。它必須是合法的[BCP 47](http://people.w3.org/rishida/utils/subtags/)語言標簽。如果`kind`屬性被設為 `subtitles,`那么`srclang`必須定義。