1

我已经构建了一个非常简单的 HTML 5 视频切换器，它在 Firefox 和 Chrome 中运行良好。load()我可以看到 src 值根据需要发生变化，但触发和/或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>
4

0 回答 0