Issues with playing inline local HTML5 video files on Android 4.4 Chromium webview

Question

I’m updating a 2.2/2.3 Android app that used fullscreen HTML5 video within a webview, and trying to implement inline video on the newest 4.4 platform. Having read that the new Chromium webview had much improved support for HTML5 features, I thought that the HTML5 video tag would function similarly to how it does on the Chrome browser. Foolish me.

After struggling to get inline video working, I was able to do so. As mentioned in other posts, the inline video support for local files only works with external video files located on the sdcard. I was unable to access my video files, as before, from either the Assets folder or via Raw resource file. I also had to add the READ_EXTERNAL_STORAGE permission to my app’s manifest. Here’s the Video tag and permission markup:

<video id="video1" class="div-centered-content" controls preload="none" src="/sdcard/gizmo.mp4" type="video/mp4"></video>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Here are some other conclusions that I’ve drawn from my efforts. If you know otherwise, please view these as questions that need a correct answer.

1. The Autoplay and Loop HTML5 video tag attributes do not work.

2. The Fullscreen button within the default player controls does not function.

3. The new webview’s handling of the src attribute provides no automatic parsing and handling of Asset video files and/or resources located in the Res/Raw folder. Because Assets and Resources are compressed inside the .apk, they cannot be loaded directly via the HTML5 video’s src attribute.

4. The onShowCustomView handler only gets invoked when the user touches the fullscreen button on the player’s controls. There is not an obvious way to intercept and manually handle the video within Android from the very beginning when the video is played via javascript. I have no clue as to whether there is a way via javascript and a bridge to manually invoke a VideoView and process it similar to the way it’s done in 2.2. If this can actually be done, there is no sample code that illustrates the best way to do so. (I would like this option, because I could then load video files from my Assets/Resources and also provide a fullscreen capability.)

If there are any concise examples of how to address the above issues, I’m sure the community of webview users would appreciate the information. Still can’t believe that 2 years later the Android webview team has failed to both fully support the HTML5 video tag or provide ANY documentation that would help developers more easily implement webview apps that incorporate video.

Answer 1

Let's see if we can help each other. I'm having a similar problem but after testing several browsers I found that UCBrowser works flawlessly with my target platform. Also another clue that I got is that while I'm developing my solution to run for something like Chromecast I found out that it seems to work on my Galaxy Tab2. I was watching my Logcat and noticed that on the Tab2 Chrome and UCBrowser do not work similarly.

I noticed through Logcat that Chrome and UCBrowser seem to have a little difference when it gets down to the MediaPlayer level. This is outside of our control because it is triggered by the Webview.

This is the intriguing part. I decided to make the Tab2 a webserver to host the same html page and video files and then bingo! now Chrome can show the pictures and my javascript works as expected. So it seems to me that the problem is present only if we are passing an url like "file:///mnt/sdcard/download/videos.html" and all of my videos are stored on the same sdcard. I thought this configuration would make things better for Webview to avoid using the bandwidth over the air.

for what is worth my problem seems to be resolved as long as I keep my html and video files remotely. UCBrowser however does not seem to have this problem so I'm wondering what they are doing differently.