Question

I’m building a mobile site and I’m having trouble playing video on android devices. I can get the video to play but find it erratic. Sometimes it causes the browser to crash, other times the controls aren’t responsive. Most of my testing is on the Galaxy S3 and Nexus.

The code is a link that you can click to play the video.

<div id="player"></div>
<a href="#" onclick="DoNav('<?php echo $url; ?>');" title="Click to play video"> <?php echo $result_videos[$i]["camera_name"]; ?> </a>

The javascript/jquery mix (not very optimal, so maybe this is the problem):

function DoNav(theUrl)
{

// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
    var mydiv = $("#player");
        var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
           mydiv.append(myvideo);
} else {
   $('#myfileplayer').attr("src",theUrl); 
}

var video = document.getElementById('myfileplayer');
video.addEventListener('click',function(){
  video.play();
},false);

} 

I’m not sure what else to debug here. Any ideas?

Answer 1

Thanks to @akonsu he mentioned why I would even need the click event listener? Good point, I don’t. I remove that and all the weird behavior is gone.

function DoNav(theUrl)
{

  // only add the player if it doesn't yet exist
  if($('#myfileplayer').length == 0) {
    var mydiv = $("#player");
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
       mydiv.append(myvideo);
  } else {
     $('#myfileplayer').attr("src",theUrl); 
  }

}