Unable to play the Video in HTML5

Question

In my application i have a video tag for which i am appending src dynamically

this is my code

<video autobuffer controls autoplay>
  <source id="howtovideoimg" src="" type="video/mp4">
</video>


$( document ).ready(function() {
 $('#howtovideoimg').attr('src', 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4');
});

This is my fiddle

http://jsfiddle.net/cod7ceho/125/

Please let me know how to play the video

Possible duplicate of [changing source on html5 video tag](http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag) — insertusernamehere, Sep 27 '16 at 10:13
"src" is not an attribute of the video tag. It needs a `` tag within it. http://www.w3schools.com/html/html5_video.asp. — ADyson, Sep 27 '16 at 10:15

score 1 · Accepted Answer · answered Sep 27 '16 at 10:49

$( document ).ready(function() { 
  var player = document.getElementById('videoPlayer');
      var filepath = document.getElementById('videoPlayer');
      filepath.src = "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4";

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video autobuffer controls autoplay id="videoPlayer">
  <source id="howtovideoimg" src="" type="video/mp4">
</video>

score 0 · Answer 2 · edited Oct 06 '16 at 15:19

You must create a new <source> element and then append it to video tag, it is simple to add the element dynamically in javascript, I put a example of js code, I think that can be of help for you...

function addSourceElement() {
  var source = document.createElement('source');
  var video = document.createElement('video');
  source.src = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4';
  source.type = 'video/mp4';

  video.appendChild(source);
  document.body.appendChild(video);
  video.play();
}

score 0 · Answer 3 · answered Sep 27 '16 at 10:58

Simply use this kind of JS:

$('#howtovideoimg source').attr('src', "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4");

on this html:

<video id="howtovideoimg" autobuffer controls autoplay>
  <source src="" type="video/mp4">
</video>

I use to have a value in the source on page load (a white video) to avoid some weird behaviour on browser that do not consider the source attribute if it is empty

Unable to play the Video in HTML5

3 Answers3