Android webview video playback experience summary

 

Currently, the support for video in PC browsers is basically no problem. However, if you use webview to run such a page, you will encounter many problems.

 

The following section html

 

              no support text                       

Using js to control the automatic playback and loop playback of videos, there is no problem on the PC. However, if webview is used for loading, automatic playback and loop playback may not be used.

 

In android webview, autoplay supports automatic playback, which is related to devices and does not have to be related to the android version number (this one has been tried ). And most devices cannot play the video automatically. The loop feature is basically not supported.

 

Webview has gone through the following debugging process. If you open the video controls, let it display the control. Click the playback control to play normally. This proves that playing mp4 videos is correct. Html5 video details can refer to the http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp

If you add a button on the page and click the button to call the video. play () method, can you play the video.

 

                    play        

Js Code

 playBtn01 = document.getElementById("playBtn01""click", 

This allows normal playback.

So I thought that I could call the video. play () method to play the video automatically at a specific time (for example, when an event occurs or when the timer time is reached?

 

Modify the code

 

        video01 = document.getElementById("video01"   timer =    playing =    video01.addEventListener("playing",    playing =     timer = setInterval(playInterval, 1000        (playing ===     }      (timer !==      }

The code is very simple, that is, if the video is not played, the video. play method is continuously called. If yes, clear the js timer. Because video. play can be played normally when the previous button event is called, we thought this solution could work at the beginning. But in fact, this solution does not work. After a long time, I don't know why. The Code is the same. Later, I learned the cause. autoplay can play automatically on mobile devices, which may lead to poor user experience. Therefore, most mobile devices do not support automatic playback. If you want to play a video, you must manually trigger it, such as clicking a button or other operations. It is not feasible to play a video like setInterval without user participation. It seems impossible to use setInterval or other non-user interaction events to trigger video playback. But there is a unique exception. The only exception is that the callback in the onPageFinishload method of the android native section is acceptable. That is to say, if onPageFinishload calls js to execute the video. play method, it can also be automatically played. OnPageFinishload is triggered after webview loads content. Although there is no user interaction, it can be used for automatic playback. Modify the android code, rewrite the onPageFinished method of WebViewClient, and use loadUrl to execute a js function.

  view.loadUrl("javascript:onPageFinished();"

On the js end

"page -- onPageFinished"     video01 = document.getElementById("video01"

This enables automatic playback.

 

In fact, I have not solved the last loop problem. But I 'd like to write it out to you to see if anyone knows what's going on. Because the device may not support loop loops. However, you can use the above method to automatically play the video. The pause event is generated after the video is played. we load the webview again or destroy the webview to create a new webview. So I repeat it again and play it again automatically. In this way, we feel like Automatic loop. However, this effect is not good. On the one hand, after the playback is complete, the page is re-loaded to know that the video is played out, and there will be intermittent process in the middle, which does not seem very consistent. Another fatal problem is that I tried to destroy webview and rebuild this loop, but after several rounds, the program crash fell. The reason for this crash is very complicated, and it also recognizes machines, so I will not talk about it much. In short, mobile devices currently do not support html5 video very well, and they are difficult to use. Finally, my project gave up the html5 method and switched to local code implementation.