A, video support for video formats:
The following are the three most commonly used formats
1, ogg formats: Theora video encoding with (free) + Ogg Vorbis audio files encoded (free) Supported browsers: Firefox, Chrome, Opera 2, MPEG4 format: with H.264 video coding (fee) + AAC MPEG4 encoded audio files (surcharge) supported browsers: Safari, Chrome 3, Webm format: with VP8 video coding (free) + Vorbis audio encoding format WebM (free) supported browsers: IE, firefox, chrome, opera advantages: all free, better compression (small), good video quality disadvantages: small video transcoder little, does not improve code
Second, the video property code tag: bold attribute tag is used
| Attributes |
value |
Functional Description |
| controls |
controls |
Whether to display the playback controls |
| autoplay |
autoplay |
Set automatically play when it is turned on browser |
| width |
Pilex (pixels) |
Set the width of the player |
| height |
Pilex (pixels) |
Set the height of the player |
| loop |
loop |
Set whether the video loop (ie continue playing after replay) |
| preload |
preload |
And other settings are finished loading and then play |
| src |
url |
Set the url address to play video |
| poster |
imgurl |
Setting the player initial default display picture |
| autobuffer |
autobuffer |
Set browser cache mode, do not set autoply valid |
Three, source code labels:
src: specifies the path where the video
type: Specifies the format of the video
Four, track caption label property code:
| Attributes | description |
|---|---|
| kind |
Define captions content type, which is only one of five: Subtitles , captions , Descriptions , Chapters , the Metadata . |
| src |
URL address of the subtitle file |
| srclang |
Language type of subtitle file, identifies the role of information, the player does not use this property. |
| label |
Subtitles labels, each subtitle element necessary to provide a unique non-repeating label name to be displayed when switching subtitles. |
| default |
Specifies whether the default subtitles. If each is not specified, it will not automatically display subtitles. |
Internet suffix is rare vtt format caption files, common or srt format, will be converted to provide srt subtitle file format vtt format here: https://atelier.u-sub.net/srt2vtt/
For video files, you can make your own online. Also you can go to find relevant resources in the network. : Https://www.zhangxinxu.com/sp/webvtt.html
.vtt File Format Description: Is a UTF-8 encoding to .vtt file extension of a simple text file. beginning .vtt subtitle file If you do not write WEBVTT the subtitle files are not successfully loaded into the video , such as file content: contains tips that can be single or multiple rows 1 WEBVTT 2 3 100: 00: 00.160 -> 00: 00: 18.930 4 5 Hey, this is to create a business 6 7 200: 00: 18.930 -> 00: 00: 22.490 8 is me and you 9 and your love life.
Fifth, make examples of video and subtitle presentation:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 video::cue{ 6 background-color:transparent; 7 color:white; 8 font-size:20px; 9 line-height: 100px; 10 } 11 </style> 12 </head> 13 <body> 14 15 <video controls="controls"> 16 <source src="黑客军团第一季1.mp4" type="video/mp4"/> 17 <track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/> 18 <track src="b.vtt" label="english" srclang="en" kind="subtitles" /> 19 </video> 20 </body> 21 </html>