媒体资源 · 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. 当画布大小改变，画布内容会清空 ```