Faqs and Solutions:

1. Video Add the autoplay attribute, and the video cannot be played normally.

Solution:

The video label required the addition of the

2. When playing video in some Android browsers, the video cannot be played on the H5 page, and the system will automatically take over the video.

Solution:

Add inline playback properties; If you want to play video within the H5 page, you need to add webKit-PlaysinLine to the video TAB, and on some ios you need to add PlaysinLine.
Some apps require support for inline playback, which required the following attributes: webview.allowsInlineMediaPlayback = YES;

3. It may be the reason that the video is taken over. Sometimes the video cannot be played directly on the mobile terminal or there is a lag phenomenon.

Solution:

Enable H5 kernel H5 player;

4. Video cannot cover the entire screen

Solution:

Style =”width= 100%; height=100%; Object – fit: the fill “;

5. Mobile terminal ① When playing, click pause and a mask appears; ② Pause, click play and the mask disappears;

Create a masked div, use the video method: play(), pause(); ② It is also possible to use event delegate;

Mask layer production can refer to fixed layout application scene – mask layer

Reference ideas and code (style not written) :

**

<! -- video --> <div class="video-wrap"> <video id="video" class="myVideo" src="" poster="" width="100%" height="100%" object-fit:fill webkit-playsinline playsinline x5-video-player-type="h5" x5-video-orientation="portraint"> Your browser does not support HTML5 video. </video> </div> <! -- like_icon --> <div class="likeIcon-wrap"> <div class="like-icon" data-key="on"></div> <div class="like-num"></div> </div> <! -- mask --> <div class="video-mask"></div> <! -- pause_icon --> <div class="video-pause"></div>Copy the code

**

$(document).ready(function () { // video play $('.video-mask').on('click', function () { maskCancel(); $('#video').get(0).play(); // Play is not a jQuery function, but a DOM function, Need through the DOM to call play}) / / video pause $('. The video - wrap ') on (' click ', function () {$(' # video.) get (0). The pause (); maskShow(); $('#video'). On ('ended', function () {maskShow(); }) }) var video_mask = $(".video-mask"), video_pause = $(".video-pause"), video = $("#video"); //video-mask/video-pause show function maskShow() { video_mask.css('display', 'block'); video_pause.css('display', 'block'); } //video-mask/video-pause cancel function maskCancel() { video_mask.css('display', 'none'); video_pause.css('display', 'none'); }Copy the code
6. Whether the monitoring video is over

Mainly used is listening to ended events;

**

Var video= document.getelementByid ("video"); var video= document.getelementByid ("video"); video.addEventListener('ended', function () { console.log('play over! '); }, false); $('#video'). On ('ended',function(){console.log('play over! '); })Copy the code

Note: addEventListener is a js listener event. If you use this in jQuery, you can use on listener.

JQuery H5 play(), pause()

Use document.getelementById (‘ video ‘).play() in js; Yes; But using $(‘#video’).play() in jQuery is wrong.

$(‘#video’).get(0).play() $(‘#video’).play()

8. About custom attributes in H5

According to the H5 standard, custom attributes start with data-*, which distinguishes native attributes from custom attributes. We can obtain our custom attributes through getAttribute() of native JS and attr() of jQuery. Such as:

leaf

Author: front of leaf links: www.jianshu.com/p/1af67479d… The copyright of the book belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.