HTML5播放器API集合 轻松学会HTML5播放器开发

本文作者html5tricks,转载请注明出处

之前我们分享了两款不错的HTML5播放器,分别是HTML5视频播放器Video.JsHTML5播放器神话 卡带式古典播放器,效果都非常酷。今天我再分享一款最基本的HTML5视频播放器,这个播放器演示罗列了所有操作HTML5播放器的API,初学者可以更好的学习和使用HTML5播放器。

html5-video-api

在线演示源码下载

HTML代码:

<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
       <p>Your user agent does not support the HTML5 Video element.</p>
 </video>
<div id="buttons">
      <button class="large awesome" onclick="document._video.load()">load()</button>
      <button class="large awesome" onclick="document._video.play()">play()</button>
      <button class="large awesome" onclick="document._video.pause()">pause()</button>
      <button class="large awesome" onclick="document._video.currentTime+=10">currentTime+=10</button>
      <button class="large awesome" onclick="document._video.currentTime-=10">currentTime-=10</button>
      <button class="large awesome" onclick="document._video.currentTime=50">currentTime=50</button><br>
      <button class="large awesome" onclick="document._video.playbackRate++">playbackRate++</button>
      <button class="large awesome" onclick="document._video.playbackRate--">playbackRate--</button>
      <button class="large awesome" onclick="document._video.playbackRate+=0.1">playbackRate+=0.1</button>
      <button class="large awesome" onclick="document._video.playbackRate-=0.1">playbackRate-=0.1</button><br>
      <button class="large awesome" onclick="document._video.volume+=0.1">volume+=0.1</button>
      <button class="large awesome" onclick="document._video.volume-=0.1">volume-=0.1</button>
      <button class="large red awesome" onclick="document._video.muted=true">muted=true</button>
      <button class="large red awesome" onclick="document._video.muted=false">muted=false</button><br>
      <button class="large blue awesome" onclick="switchVideo(0);">Sintel teaser</button>
      <button class="large blue awesome" onclick="switchVideo(1);">Bunny trailer</button>
      <button class="large blue awesome" onclick="switchVideo(2);">Bunny movie</button>
      <button class="large blue awesome" onclick="switchVideo(3);">Test movie</button>
    </div>

JavaScript代码:

function init() {
    document._video = document.getElementById("video");
}
document.addEventListener("DOMContentLoaded", init, false);

//switching videos (playlist)
var videos = 
[
 [
	"http://media.w3.org/2010/05/sintel/poster.png",
	"http://media.w3.org/2010/05/sintel/trailer.mp4",
	"http://media.w3.org/2010/05/sintel/trailer.webm"
 ],
 [
	"http://media.w3.org/2010/05/bunny/poster.png",
	"http://media.w3.org/2010/05/bunny/trailer.mp4"
 ],
 [
	"http://media.w3.org/2010/05/bunny/poster.png",
	"http://media.w3.org/2010/05/bunny/movie.mp4"
 ],
 [
	"http://media.w3.org/2010/05/video/poster.png",
	"http://media.w3.org/2010/05/video/movie_300.mp4",
	"http://media.w3.org/2010/05/video/movie_300.webm"
 ]
 ];
function switchVideo(n) {
	if (n >= videos.length) n = 0;

	var mp4 = document.getElementById("mp4");
	var parent = mp4.parentNode;

	document._video.setAttribute("poster", videos[n][0]);
	mp4.setAttribute("src", videos[n][1]);
  document._video.load();
}

在线演示源码下载

热门推荐