H5 embedded video bug and summary, h5 embedded video bug

H5 embedded video bug and summary, h5 embedded video bug

During a recent h5 activity, many problems were discovered due to video embedding. During the test, problems were found in different versions of different systems, environments, and more or less, I am also overwhelmed, but fortunately the problem is solved and I have learned many things. To facilitate future reference, let's take a look. Now I have an idea that when the problem comes, don't feel frustrated, don't complain, and face it positively. If there is a problem, it means you are not doing well enough. After the problem is solved, you can accumulate some resources, I can learn new things. Isn't that good. Haha, now I will write down the problem in this h5 project.

1. webkit-playsinline can be used to prevent ios users from automatically playing full-screen videos (safari is stubborn and cannot be done for the moment). android does not automatically play full-screen videos.

2, $ ('. video'). on ('enabled', function () {}) is used to detect certain operations after the video is played (whether fast forward or automatic Broadcasting.

$ ('. Video '). trigger ('play') and document. getElementById ('video '). play () is used to trigger video playback. autoplay is disabled on the mobile phone to protect user traffic.

Document. getElementById ('video'). pause () pause

Document. getElementById ('Demo'). volume + = 0.1 volume control

3. audio does not support autoplay: safari under iPhone 6, Samsung (third-party browser (chrome ))

Audio supports autoplay: iPhone 6, with a browser provided by Samsung

Video does not support autoplay: safari and Samsung under iPhone 6 (Browser Third-Party Browser (chrome ))

Video supports autoplay: iPhone 6

The following solutions can solve the problem of automatic playback on some mobile phones (of course, many different mobile phones, including different system versions, will be updated in the future)

1 function autoPlay (id) {2 var a = document. getElementById (id), 3 play = function () {4. play (); 5 document. removeEventListener ("touchstart", play, false); 6}; 7. play (); 8 document. addEventListener ("WeixinJSBridgeReady", function () {// 9 play (); 10}, false); 11 document. addEventListener ("touchstart", play, false); // touch 12} 13 autoPlay ('audio ');

5. Then there was a big bug. The video was hidden at the beginning, but the page was displayed when I clicked to show it and play it back, however, some mobile phones only have sound and no images. This means that video has been played since it is not displayed. Then the solution is to show () again, in addition, you cannot delay video playback events. If not, you may encounter problems on some mobile phones. However, now I can only guess this result, because it is really irregular, you can only continue to accumulate in the future.

6. The unbind method is rarely used in the past, but this time, if you click a page too quickly, it may be triggered twice, therefore, if you only want to trigger the unbind event after the trigger ends.

The above is basically the problem encountered in this project. We will continue to extend some relevant knowledge for the next time:

7. Stop downloading the video (because some browsers may continue to download the video after you pause the video ):

Var a = document. getElementById ("");
A. pause ();
A. src = ''; or a. removeAttribute (" src ");

8. Set the playback time point positioning:

Var a = document. getElementById ('');
A. seekable. start (0); // return start time (seconds)
A. seekable. end (0); // return end time (seconds)
A. currentTime = 100; // locate to play for 100th seconds
A. played. end (0); // returns the length of time (in seconds) that has been played)

9. Set the playing range:

When a video or audio file is embedded in a webpage,<audio>Or<video>The element allows us to provide additional information to specify the playing time range. The method is to follow the ("#") format information behind the media file. For example:
Src = "video.mp4 # t = 10, 20" (played from 10 s to 20 s)
Src = "video.mp4 # t = 10" (from 10 s to the end)
Src = "video.mp4 # t =, 10" (from the start to 10 s)

Come here this time, and try again next time.