HTML5 video doesn't play until source update

Question

I've got a HTML5 player, which is a part of my mobile (cordova) app:

<video width="100%" height="100%" id="video-1" src="/mnt/sdcard/xyz-media/xyz.mp4?param=8zw6y" preload="none">
  <source src="/mnt/sdcard/xyz-media/xyz.mp4?param=8zw6y" type="video/mp4">
</video>

?param= in the and was added because of known Chrome bug caused by loading multiple videos.

So I have in my code also canplaythrough event:

var videoWrapper = document.getElementById('video-1');

videoWrapper.addEventListener('canplaythrough', function(){
  videoWrapper.play();
});

But video never plays. When I try to execute it manually it doesn't work either, but when I manually reload src attribute and then try play - it works:

var src = document.getElementById('video-1').getAttribude('src');
document.getElementById('video-1').setAttribute('src', src);
document.getElementById('video-1').play();

Why video doesn't play without this refresh? Please help.

Answer 1

I suspect the problem is on preload property. You have configured it as none so browser doesn't load video when page loading. Using auto should works.

<video width="100%" height="100%" id="video-1" preload="auto">
  <source src="/mnt/sdcard/xyz-media/xyz.mp4?param=8zw6y" type="video/mp4">
</video>