HTML5 Video Implementation Scheme

Source: http://ask.dcloud.net.cn/article/569

SOURCE download

The recent project needs to use the HTML5 video playback function, so a little research to understand the next, encountered a lot of pits, hereby recorded.

First, HTML5 Video
Reference Source: http://www.xuanfengge.com/html5-video-play.html
(This post does help a lot)

1.1. Purpose
Apply the HTML5 video feature to the actual project and personalize it for different platforms and environments.
Basically only consider WebKit browser compatibility issues

1.2. HTML5 Video Support format
Only supported:. mp4 suffix (. H264 encoded format), and. WEBM suffix (dedicated web video format), and. ogg suffix (audio file)
Note: HTML5 Video can add multiple source sources for compatibility, so that the next source is automatically read when a problem is read by the first source. For example, you can add. webm and. mp4 sources at the same time, so that an error will automatically read another available source (because different browsers, supported formats are not the same)
However, under Hybird mode Android, some models can only read the first source sources (test Huawei and Lenovo are), so that is to say in this case, to ensure that the first source is correct
Compatible with all major browsers:
See Figure 1

1.3. Different platform environment and corresponding implementation plan
Description: This is divided into two chunks, the normal browser environment (PC and mobile, mainly mobile, PC does not do special processing) and Hybird mode of the app environment (Android and iOS).
Note: HTML5 video can play local or network video
1.3.1, General browser environment
* Play bar control with HTML5 video
* After processing with video unified processing, click on the image to manually hide the image, set the video size, manually play the video.
Note: The playback effect is implemented by the major browsers themselves

The different effects of mobile browser implementation, such as:
QQ browser (including the QQ client built-in browser): will automatically enter the full screen when playing
Huawei comes with a browser: normal small window playback

1.3.2, hybird app Environment
Note: Inline playback refers to playing videos directly in the video tag, no need to go to full screen

1.3.2.1, Android inline playback
* Play bar control with HTML5 video
* After processing with video unified processing, click on the image to manually hide the image, set the video size, manually play the video.
*android inline playback needs to be aware that hardware acceleration must be turned on, as some Android phones webview hardware acceleration By default, so you must manually add hardware acceleration properties when creating this webview with video playback. (see Plus create webview style for details)

true;

1.3.2.2, iOS inline playback
* Play bar control with HTML5 video
* After processing with video unified processing, click on the image to manually hide the image, set the video size, manually play the video.
* Inline Playback Note the main point, because the default is full-screen playback under iOS, so it needs to be set to play properly inline
First step: Configure allow WebView inline playback within the manifest of the project

"Plus": {        "SplashScreen": {            true,/* whether the program startup screen is automatically closed, True to automatically close when the app portal page is loaded, false to Plus.navigator.closeSplashscreen () off */            true*/  whether to display wait snowflakes at the program startup screen, True to show, false to not display.  */        }        ,true,/* set allow inline playback under iOS * /        "Popgesture": "Close"

Step two: Manually add inline playback properties when creating the video tag (iOS does not support preload)

<!--                     let iOS support inline playback, you must add WebKit-playsinline label                 --                <video webkit-playsinline ID = "Videomedia" controls= "Controls" preload>

This way the iOS phone will play inline only when it is playing

1.3.2.3, Android non-inline playback
* Use native player to play video via NJS, incoming URL can be local or network address
* After processing with video unified processing method, after clicking the picture, the picture remains the same (so there is no need to hide the image), directly to get the video resource address, to the native player playback
Note: In this mode, the performance is higher than the direct HTML5 player

1.3.2.4, iOS non-inline playback
* Play bar control with HTML5 Video (non-inline playback needs to remove specific inline properties "webkit-playsinline" to play in full screen)

if (! Isinlineplay) {                    // If it is non-introverted, iOS needs to remove the inline style                    mediatarget.removeattribute (' Webkit-playsinline ');                } 

* After processing with video unified processing, click on the picture, the picture remains the same (so there is no need to hide the picture), directly call Video.play () play the video (this time will be a full-screen player to play the video)

1.3.3, Attention points
If you use NJS to play video through the Android native player, you cannot currently hear some of the custom events of the video. (e.g. download, play finished, pause, play time, etc.)
If you use HTML5 video to bring your own playback, these can be controlled by scripting.
So when you choose a scenario, you need to measure
* In addition, in HTML5 video playback, can not hear the specified end event seeked, can only be judged in Timeupdate, if the ended is true represents the end.
* When Njs is played via Android native player, the document listens to resume and pause events to determine whether to play and exit playback

1.4. Tips

1.4.1, the solution of unified video Processing
Description: Due to the display of a <Video> directly in the page, there will be a variety of different player effects:
(References to reference sources are shown here)
See Figure 2

Obviously, the experience isn't good, so it's time to use a simulated picture instead of the <Video>, and set the video element to 1*1 pixel size. Then click on the image to listen to, monitor when you hear the click, play videos.
Attention:
* Do not use {Display:none} or {width:0;height:0;} , because the video element is in an inactive state, causing trouble for subsequent processing.
* There is no consideration for compatibility issues with IOS<6 and some of the lower versions of Android (these versions cannot be played directly via Video.play () because the project environment basically requires android>4.0 IOS 7.0 or more.
* About clicking on the image to play the video, if it is inline play mode (or a normal browser), you should hide the picture, and then set the video size to the original size (usually the picture size), if the non-inline playback mode (full-screen mode), there is no need to hide the picture, Because the iOS will automatically open a full-screen player to play the video, Android under the HTML5 video to consider the card, so also through the NJS using the native player to play full-screen video.

1.4.2, Android NJS Implementation code for the video playback screen
Description: This is a shared Dcloud forum.

 //  Android in non-inline mode is only used in  var  Intent = Plus.android.importClass ("android.content.Intent" );  var  Uri = Plus.android.importClass ("Android.net.Uri" );  var  main = var  intent = new   Intent (Intent.action_view);                  Uri.parse (URL);                Intent.setdataandtype (URI,  "video/*" ); Main.startactivity (intent);  

1.4.3, how to read the width and height of the element
* When capturing the width of the video, it is found that the width cannot be obtained with video.style.width.
Later, it was found that dom.style.width (height) can only get the value directly given in Stye. If the value given by the CSS stylesheet is not directly obtained, it can only be obtained by Dom.offsetwidth (offsetheight).
* Setting element width and height is not set directly in style, but is best given by CSS style sheet
* When reading element width and height, use offsetwidth (offsetheight)

1.4.4, questions about full-screen playback
In the PC-side WebKit Browser, the full-screen code is as follows:
Go to Full screen: Videocontainer (corresponding DOM). Webkitrequestfullscreen ();
Exit Full screen: Document.webkitcancelfullscreen ();
* But tested, in mobile browser and Hybird mode in the mobile phone environment can not be used,
Should be mobile browser in the full-screen mode of the video player and the PC side of the difference, has been separated from the WebKit full-screen components, but with the original self-implementation.

1.5. Encountering problems and solving methods

1.5.1, video.currenttime setting value is invalid, or becomes 0
Cause Analysis:
Related to the test server and port, the test environment is placed in the Hbuild local browser, does not handle the video fast forward problem, so it will cause each fast forward, the video will be reset-on some test servers, the fast forward is invalid, but does not reset
Workaround:
It is OK to open the Web page with other official servers, such as Tomcat,wampserver, or even open it locally.

1.5.2, unable to get resource path through code VIDEO.SRC
Cause Analysis:
In this example, video is added src through source and cannot directly read the SRC of video
Workaround:
The src of the source can be obtained by reading the label of the first source
Note: One drawback of this approach is that it is possible that the src of the first source is not available. However, because the first source in Android must be useful. Otherwise it will not play properly. So you can use this if you are sure that the first source is correct.

1.5.3, some Android models cannot exit full screen
Describe:
When playing with HTML5 video player, some Android models (such as Lenovo K860 click the Full Screen button to enter full screen, cannot exit full screen-because the full screen button disappears after entering full screen)
Cause analysis: May be the handset manufacturer hijacked the browser or tampered with the browser implementation mode
Workaround:
Currently cannot be solved, in this type of aircraft, it is recommended to use the non-inline mode directly or try not to manually enter the full screen

HTML5 Video Implementation Scheme