1

I've built out a very simple HTML 5 video switcher that works great in Firefox and Chrome. I can see the src values change, as desired, but there seems to be an issue with triggering the load() and/or play() events. I've gone as far as editing .htaccess to ensure the mime types and changed the paths to the videos to direct http links. I'm pretty sure the issues lies within how simple the load/play function is but am struggling trouble shooting this or finding reliable documentation online.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var videos = new Array();

videos[0] = [
         "poster1.png",
         "video1.mp4",
         "video1.ogv"
         ];
videos[1] = [
         "poster2.png",
         "video2.mp4",
         "video2.ogv"
         ];
videos[2] = [
         "poster3.png",
         "video3.mp4",
         "video3.ogv"
         ];
videos[3] = [
         "poster4.png",
         "video4.mp4",
         "video4.ogv"
         ];

function switchVideo(n) {
    if (n >= videos.length) n = 0;

    var video = $("#video");
    var mp4 = $("#mp4");
    var ogv = $("#ogv");

    video.attr("poster", videos[n][0]);
    mp4.attr("src", videos[n][1]);
    ogv.attr("src", videos[n][2]);
    
    loadVid();
}

function loadVid() {
    document.getElementById("video").load();
    document.getElementById("video").play();
}
</script>

<div>
<video id="video" poster="poster1.png" height="445px" width="900px" preload>

  <source id="mp4" src="video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source id="ogv"  src="video1.ogv" type='video/ogg; codecs="theora, vorbis"'>
  
  <p>Your user agent does not support the HTML5 Video element.</p>

</video><br>

  <button onClick="switchVideo(0);">Video 1</button>
  <button onClick="switchVideo(1);">Video 2</button>
  <button onClick="switchVideo(2);">Video 3</button>
  <button onClick="switchVideo(3);">Video 4</button>
  
</div>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Travis Hall
  • 43
  • 1
  • 4
  • Why are you triggering the load and play events? Don't you want to do this instead? `document.getElementById("video").onload = function () { document.getElementById("video").play(); }` – Andrea Apr 23 '12 at 18:41
  • If I'm not mistaken IE 9 requires that the `VIDEO` tag be 'created', so to speak, at the same time as the `SOURCE` tags. For example, using javascript `println` in chunks won't work, nor changing the value of the `SRC` attribute of `SOURCE`s. You might need to replace the whole `VIDEO` tag or have one for each video. – frozenkoi May 08 '12 at 21:25
  • See: http://stackoverflow.com/questions/6080433/unable-to-change-source-of-video-tag-via-javascript-on-ie9 and http://stackoverflow.com/questions/9760143/jquery-and-html5-video-change-source-onclick – frozenkoi May 08 '12 at 21:41

0 Answers0