我已经构建了一个非常简单的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>