How to implement H5 video and operate barrage

This time I will show you how to implement H5 video and operate barrage. H5 video implementation and operation barrage What are the precautions?The following is a practical case, let's take a look.

HTML5 allows us to use the element to specify subtitles for videos. Various properties of this element allow us to specify things like the type of content we are adding, the language it is in and of course a reference to the text file that contains the actual subtitle information.

<video id="video"  controls>
    <source src="./step.mp4" type="video/mp4">
    <track label="中文字幕" kind="subtitles" chapters metadata srclang="zh" src="./caption.vtt" default>
    <track label="ABC" kind="subtitles" srclang="de" src="./caption1.vtt">
    <track label="Number" kind="subtitles" srclang="es" src="./caption2.vtt">
 </video>

Track attribute introduction:

• kind is assigned a value subtitles, indicating the type of content contained in the file

The

• label is given a value indicating the language in which this subtitle set is written - such as English or Deutsch - and these labels will appear in the user interface to allow the user to easily select the language they want to see the subtitles in.

• #src is assigned in each case a valid URL pointing to the relevant WebVTT subtitle file.

• srclang Indicates the language in which the content of each subtitle file is located.

• The default attribute is set on the English element to indicate to the browser that this is the default subtitle file definition to be used when subtitles are turned on and the user has not made a specific selection.

WebVTT Subtitle File

The file containing the actual subtitle data is a simple text file that follows a specified format, in this case a Web video Text Track (WebVTT) format. The WebVTT plug-in specification is still under development, but the main parts of it are stable, so we can use it today.

Video providers (such as Blender Foundation) provide subtitles and subtitles in the text format of their videos, but usually in SubRip Text (SRT) format. These can be converted to WebVTT using online converters such as srt2vtt.

File format specification:

The suffix name of the file is ==.vtt==

==.vtt==The MIME type of the file is text/vtt

Under Chrome and Firefox browsers, .vtt subtitles can be loaded and displayed without any obstacles. However, for IE10 browser, although .vtt subtitles are also supported, the MIME type needs to be defined, otherwise it will Ignore the WebVTT format. A simpler way is to add an .htaccess file under the folder where the subtitles are located, and write AddType text/vtt .vtt in it.

//Must be declared at the beginning of the file ==WEBVTT==
WEBVTT
// Start time --> End time, unit is milliseconds
00:00 ;
00:00:03.001 --> 00:00:06.000
All Heavens Gods and Demons 2222
00:00:06.001 --> 00:00:09.000
With my blood body 3333
00:00:09.001 --> 00:00:12.000
Sacrifice 4444
00:00:12.001 --> 00:00:15.000
三生七世5555

Subtitle css style settings

::The key to the cue pseudo element is to target individual text track cues for styling , as it matches any limited club. There are only a few CSS properties that can be applied to text hints:

color
opacity
visibility
• text-decoration

##text-shadow

• ##background Shorthand performance

• outline Shorthand performance

• font Shorthand attribute

• line-height

• white-space

• ##==Note: :: cue style for cue Currently works on Chrome, Opera and Safari, but not yet on Firefox. ==

  WebVTT also supports some HTML tags for style control. Common ones include sound ==v== tag, color ==c== tag, bold ==b== tag, and italic ==i == tag, underscore ==u== tag, and ==ruby== and ==lang== tags, etc.

//设置字幕的样式
video::cue{
    background-color:transparent;
    color:white;
    font-size:20px;
    line-height: 100px;
}
// 设置单行字幕的样式 
video::cue(v[voice=aa]){
    color:green;
}
video::cue(v[voice=bb]){
    color:rgb(0, 26, 128);
}

Browser compatible

IE

By default, Internet Explorer 10 subtitles are enabled, and the default control contains a button and a menu that provides the same functionality as the menu we just built. The default attribute is also supported.

==Note: IE will completely ignore WebVTT files unless you define a MIME type. This can be easily done by adding a .htaccess file to the appropriate directory containing AddType text/vtt .vtt==

Safari

Safari 6.1 has similar support for Internet Explorer 10, showing with There is a menu of different available options, and an "auto" option has been added to allow the browser to make a selection.

Chrome and Opera

These browsers have similar implementations: subtitles are enabled by default, and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the attribute on the default element and instead try to match the language of the browser with the language of the subtitles

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other php Chinese websites. related articles!

Recommended reading:

Detailed explanation of the steps to develop mpvue framework with Vue.js

jquery fullpage plug-in adds header and tail copyright related

The above is the detailed content of How to implement H5 video and operate barrage. For more information, please follow other related articles on the PHP Chinese website!