HTML 5视频切换器无法在Safari或IE 9中播放

时间:2012-04-23 15:56:46

标签: html5 javascript-events html5-video

我已经构建了一个非常简单的HTML 5视频切换器,可以在FF和Chrome中使用。我可以根据需要看到src值发生变化,但是触发load()和/或play()事件似乎存在问题。我已经去了编辑.htaccess以确保mime类型并改变了视频的路径以引导http链接。我很确定问题在于加载/播放功能的简单程度,但在解决此问题或在线查找可靠文档时遇到了麻烦。

<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>

0 个答案:

没有答案