views:

198

answers:

2

I'm trying to dynamically spawn a video element on a page using JavaScript.

JavaScript

 <script type="text/javascript">
  $(document).ready(function() {
    var video = $(document.createElement('video'))
    .attr('id', 'VideoElement')
    .attr('controls', 'controls')
    .attr('src', 'videopath.mp4') // Changed 'href' attribute to 'src'
    .css({
      width: 640,
      height: 360
    });
  $('#VideoContainer').append(video);
});

HTML

<body>  
  <div id="VideoContainer"></div>
</body>

In Firefox I get the video harness, but the actual video doesn't load. In IE8 the video harness doesn't even appear.

Is HTML 5 just not supported enough to accomplish this yet?

Edit: Got this to work with Artiom's fix. Looks like this works fine with Chrome and Safari. I'm using a codec Firefox doesn't support, so it doesn't work there; although I suspect it will work with a supported codec. IE8 sure enough doesn't work (high five IE).

A: 

ie8 doesn't support it for sure.

Have you checked out the various jQuery-based media players? You can find ones that use html5 by default and fall back to flash in browsers that don't support it.

x1a4
+2  A: 

Actually, I think you're using the wrong attribute there :)

Replace the href attribute with the src attribute in your video tag, and I'm pretty sure it should work :P

Artiom Chilaru
Yup, you were right. =)
JoshNaro