Article directory
1. Label configuration:
| tag name | describe |
|---|---|
| src | The path address to be played |
autoplay |
Whether to play automatically, the default value is false, (Boolean) |
loop |
Whether to loop playback, the default value is false, (Boolean) |
| muted | Whether to play silently, the default value is false, (Boolean) |
| initial-time | Set the initial playback position of the video, in seconds (Number is not supported by the ByteDance applet) |
duration |
Specify video duration (not supported by ByteDance applet, Number) |
controls |
Whether to display default playback controls |
| danmu-list | Barrage list (not supported by ByteDance applet, ObjectArray) |
| our son-btn | Whether to display the barrage button is only valid during initialization and cannot be changed (not supported by ByteDance applet, Boolean) |
| enable-danmu | Whether to display barrages is only valid during initialization and cannot be changed (not supported by ByteDance applet, Boolean) |
| page-gesture | In non-full-screen mode, whether to enable brightness and sound adjustment gestures (WeChat applet, H5, Boolean) |
| direction | Set the direction of the video in full-screen mode. If you do not specify a rule, the aspect ratio will be judged by yourself. Valid values are 0 (normal radial direction), 90 (screen 90 degrees counterclockwise), -90 (screen 90 degrees clockwise) (bytes Jumping applet, H5 is not supported, Boolean) |
| show-progress | If not set, it will be displayed only when the width is greater than 240 (not supported by ByteDance applet, Boolean) |
| show-fullscreen-btn | Whether to display the full screen button (Boolean) |
| show-play-btn | Whether to display the play button in the control bar at the bottom of the video (Boolean) |
| show-enter-play-btn | Whether to display the play button in the middle of the video (not supported by ByteDance applet, Boolean) |
| enable-progress-gesture | Whether to enable gestures to control progress (not supported by ByteDance applet, Boolean) |
object-fit |
When the size of the video is different from the size of the video container, the display form of the view loop is contain: include, fill: fill, cover (WeChat applet, ByteDance applet, H5, String) |
| poster | The image network resource address of the video cover. If the controls attribute value is false, setting the poster will be invalid (String) |
| show-mute-btn | Whether to display the mute button (WeChat applet, Boolean) |
| title | The standard frequency of the video is displayed at the top when it is full screen (WeChat applet, String) |
| play-btn-position | The position of the play button (WeChat applet, ByteDance applet, String) |
| enable-play-gesture | Whether to enable playback gestures, that is, double-click to switch play/pause (WeChat applet Boolean) |
| auto-pause-if-open-navigate | When jumping to other mini program pages, whether to automatically pause the video on this page (WeChat mini program Boolean) |
| vslide-gesture | When jumping to other WeChat native pages, whether to automatically pause the video on this page (WeChat applet Boolean) |
| vslide-gesture-in-fullscreen | Whether to enable brightness and volume adjustment gestures in non-full screen mode, and whether to enable brightness and volume adjustment gestures in full screen mode (WeChat applet Boolean) |
| ad-unit-id | Advertising unit ID is posted before the video. For more details, please refer to Open Capabilities (WeChat Mini Program String) |
| poster-for-crawler | Used as a video cover display for search and other scenarios. It is recommended to use a video map without a playback icon. Only network addresses (WeChat applet String) are supported. |
| ad-unit-id | WeChat Xiaocheng subtitle video pre-post advertising unit D, for more details, please refer to the open capability [video pre-post ad] (WeChat mini program String) |
2. Event:
| event | describe |
|---|---|
| loadstart | The browser starts looking for media data on the web |
| progress | The browser is getting media data |
| suspend | The browser pauses obtaining media data, but the download process does not end normally. |
| abort | The browser aborted retrieving media data before downloading all the media data, but this was not caused by an error |
| error | An error occurred while retrieving media data |
| emptied | There are two possible reasons why the network where the video element or audio element is located suddenly becomes uninitialized: 1. A fatal error suddenly occurs during the process of loading media. 2. When the browser is selecting a supported playback format, the load method is called again. Load media |
| stalled | The browser's attempt to obtain media data failed |
play |
即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性 |
| pause | 播放暂停，当执行了pause方式时触发 |
| loadedmetadata | 浏览器获取完毕媒体的时间长和字节数 |
| waiting | 播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧 |
| canplay | 浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲 |
| canplaythrough | 浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲 |
| seeking | seeking属性变为true，浏览器正在请求数据 |
| seeked | seeking属性变为false，浏览器停止请求数据 |
| timeupdate | 由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变 |
ended |
播放结束后停止播放 |
| ratechange | defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变 |
| druationchange | 播放时长被改变 |
| volumechange | volume属性（音量）被改变或muted属性（静音状态）被改变 |
三、案例：
（1）自动播放；
（2）监听播放完成，自动划到一下页再自动播放(从0开始播放)；
