[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`必须定义。