9

I'm trying to change the video sources via JS. That's mostly working.

var basename = "video/whatever";
$("#myvideo")[0].setSrc([
    {type: "video/mp4", src: basename + ".mp4"},
    {type: "video/webm", src: basename + ".webm"},
    {type: "video/ogg", src: basename + ".ogv"}
]);

So first problem: when I change the sources the pause button shows rather than play and the big overlay play button does not show, even though it is paused. I've tried sending various combinations of stop() and pause() and setCurrentTime(0) before and after the setSrc call but no luck.

More important problem: I haven't found a way to change the poster image of the video. I was expecting to see a method in the API to change it, since I want it to update for the Flash/Silverlight fallbacks too. I tried just changing the poster attribute on the video element but that doesn't seem to do it.

tremby
  • 9,541
  • 4
  • 55
  • 74

3 Answers3

1

I know this is a fairly old question but I thought I would post the answer that worked for me.

var basename = "video/whatever";
// Where videoPlayer is the video element.
if(!videoPlayer.paused) {
    videoPlayer.pause();
}
setTimeout(function(){
    // Set poster image
    $('.mejs-poster').empty().append('<img src="'+ basename + '.jpg"/>').show();

    // Set video source
    videoPlayer.setSrc([
        {type: "video/mp4", src: basename + ".mp4"},
        {type: "video/webm", src: basename + ".webm"},
        {type: "video/ogg", src: basename + ".ogv"}
    ]);
}, 0);

Here's a good explanation of what the setTimeout is doing: https://stackoverflow.com/a/779785/1425269.

You might also need some css for the poster image, depending what theme you are using.

.mejs-poster img {
    padding: 0;
    border: 0;
    width: 100%;
    height: auto;
}
Community
  • 1
  • 1
Dan Coates
  • 81
  • 3
  • Is the `setTimeout` deferral necessary or are you just being "nice" to the browser? (And you've said `border: 0;` twice.) This looks light it ought to work. Back when I wrote the question I think I had assumed that the poster image would be part of the Flash/Silverlight (when HTML video is not available) and so replacing HTML wouldn't be useful. But now I think about it more it seems natural that it'd be an HTML element and not in the Flash/Silverlight at all. Can you confirm that? (The project I needed this for is long gone.) – tremby Oct 15 '13 at 17:32
  • Thanks, I've edited to remove the duplicate `border: 0;`. I found that without the `setTimeout` the pause method would not have time to fully execute and render before the source was changed. By having the `setTimeout` everything within it will be added to the browser execution queue after the rendering/repaint task, so the big play button should show correctly. – Dan Coates Oct 16 '13 at 06:27
0

Hmm, since this is still open, I'd suggest taking a different approach entirely.

  • Set up 4 html video objects each with the attributes you need
  • Use javascript to toggle which one is visible and play it

Hope that helps!

nerdburn
  • 692
  • 1
  • 6
  • 10
0

Take an completely different approach.

APPROACH 1:

<video controls="controls" id="Player" height="200" width="600">
<source src="video.mp4">
<object id="Player" height=200" width="600"  classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<!-- Windows Media Player Backup For IE -->
<param name="Showcontrols" value="True">
<param name="URL" value="video.mp4">
<param name="AllowShuffle" value="Yes">
<param name="autoStart" value="True">
<param name="Volume" value="100">
<param name="EnableContextMenu" value="False">
<!-- For browsers that do not support HTML5 Video -->
<embed src="video.mp4" autoplay="autoplay" controls="controls" height="200" width="600" id="Player">
</object>
</video>

(The <object> tag is for IE since HTML 5 video does not always render correctly, or sometimes doesn't allow changing of video source otherwise)

  • Change the source code in all browsers (except IE which doesn't allow changing src of <video> etc.) is to access document.getElementById("player").src="newvideo.mp4"

  • For Internet Explorer the code is: Player.url = "newvideo.mp4"

  • The only browser that may provide additional problems is Safari.

APPROACH 2: (can be used with jQuery too!)

  • Place the video inside a <span id="myvideo2"> or <div id="myvideo2"> tag of its own. Make sure to give an id, for e.g. "myvideo2"
  • Change the innerHTML using document.getElementById("myvideo2").innerHTML= /*Escaped Javascript for the HTML code for the video with new source"*/
  • Should work in all browsers
dp4
  • 11
  • 3