Changing HTML5 video src dynamically on Android?

Question

I have the following code which loads a local video on an Android device and places it in a HTML5 Video src tag:

Javascript code:

var path = 'file:///data/data/com.myapp.app/files/';

var src = path+'Intro.mp4';
var video = $("#introVideo");

video.find("source").attr("src", src);

HTML code:

<video id="introVideo" width="100%" poster="poster.jpg"controls>
<source src="" type="video/mp4">
</video>

This doesn't work on Android device. However, if i don't use the javascript code above and just use the video path like the following, everything works fine:

This works:

<video id="introVideo" width="100%" poster="poster.jpg"controls>
<source src="file:///data/data/com.myapp.app/files/Intro.mp4" type="video/mp4">
</video>

When i alert(src); I get the exact URL which is:

file:///data/data/com.myapp.app/files/Intro.mp4

Which means the video exist locally and there is an issue with my Javascript code above. But i don't understand what the issue is!

Can someone please advice on this issue?

Thanks in advance.

EDIT:

This is how the code above is trigerred:

$(document).on('click','.backit', function(e){

    var path = 'file:///data/data/com.myapp.app/files/';

    var src = path+'Intro.mp4';
    var video = $("#introVideo");

    video.find("source").attr("src", src);

});

EDIT:

Further investigation, I found out that the Video's src tag is being set correctly when i use my javascript code above, However, the video doesn't play when i set its src tag dynamically which is very strange.

is your js in a `ready` block or placed under your html, to ensure that it is not running until the html is rendered? — chiliNUT, Dec 21 '17 at 15:10
@chiliNUT, the javascript above will be only triggered on a button click and the button is only available long after the html rendering is complete. — David Hope, Dec 21 '17 at 15:11
well then maybe you could provide a more complete code sample — chiliNUT, Dec 21 '17 at 15:12
@chiliNUT, that is all the code i have... the only difference is I didn't wrap it around the $(document).on('click','.backit', function(e){......}); — David Hope, Dec 21 '17 at 15:13
same question as before then, are you binding the click event to `.backit` before its rendered — chiliNUT, Dec 21 '17 at 15:16
@chiliNUT, yea, indeed. because I do the alert(src); inside the click function and it works fine. — David Hope, Dec 21 '17 at 15:17
nvm and also ur binding to document. id make sure you have the class name right and then maybe this, https://stackoverflow.com/questions/17605296/document-onclick-not-working, also for android it helps to have a remote console for seeing js errors — chiliNUT, Dec 21 '17 at 15:18
have you checked that all the assets (not just the hardcoded one) are being bundled in the source/transferred to the device? — Offbeatmammal, Dec 22 '17 at 02:37
@Offbeatmammal, yeah, since this is a hybrid type of a project, i tested the same code on an iOS device and it works fine. But Android seems to dislike my code! — David Hope, Dec 22 '17 at 09:47

score 1 · Accepted Answer · answered Dec 23 '17 at 01:41

Not knowing what framework you're using, I just did a quick test for a similar scenario using an existing bare-bones Android app that loads an HTML page, and this worked for me (note that at runtime my webview is accessing assets from the file:///android_asset/ path as my videos are local to the project):

HTML

<video id="vid" width="320" height="240"></video>

Initial JS:

var path = 'file:///android_asset/';
var vid = document.getElementById('vid');
var src = document.createElement('source');

src.setAttribute('src', path + 'video1.mp4');

vid.appendChild(src);
vid.play();

to change the source to a new video

src.setAttribute('src', path + 'video2.mp4'); 

vid.load();
vid.play();

Changing HTML5 video src dynamically on Android?

1 Answers1