web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-27 02:43:45 +02:00
Code Releases Activity

Started spinner

Browse Source
This commit is contained in:
Steve Heffernan 2010-10-21 21:33:00 -07:00
parent c2c945afe5
commit 8eedbe6a38
4 changed files with 181 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.markdown
View File

@ -132,6 +132,7 @@ Changelog
1.1.4
- Feature: Added volume() function to get and set volume through the player.
- Fix: Fix issue where FF would loop video in background when ended.
1.1.3

112
test.html Normal file
View File

@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Video Player</title>
<!-- Include the VideoJS Library -->
<script src="video.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// Must come after the video.js library
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
/* ============= OR ============ */
// Setup and store a reference to the player(s).
// Must happen after the DOM is loaded
// You can use any library's DOM Ready method instead of VideoJS.DOMReady
/*
VideoJS.DOMReady(function(){
// Using the video's ID or element
var myPlayer = VideoJS.setup("example_video_1");
// OR using an array of video elements/IDs
// Note: It returns an array of players
var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);
// OR all videos on the page
var myManyPlayers = VideoJS.setup("All");
// After you have references to your players you can...(example)
myPlayer.play(); // Starts playing the video for this player.
});
*/
/* ========= SETTING OPTIONS ========= */
// Set options when setting up the videos. The defaults are shown here.
/*
VideoJS.setupAllWhenReady({
controlsBelow: false, // Display control bar below video instead of in front of
controlsHiding: true, // Hide controls when mouse is not over the video
defaultVolume: 0.85, // Will be overridden by user's last volume if available
flashVersion: 9, // Required flash version for fallback
linksHiding: true // Hide download links when video is supported
});
*/
// Or as the second option of VideoJS.setup
/*
VideoJS.DOMReady(function(){
var myPlayer = VideoJS.setup("example_video_1", {
// Same options
});
});
*/
</script>
<!-- Include the VideoJS Stylesheet -->
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS">
</head>
<body>
<input id="test">
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
<!-- Support VideoJS by keeping this link. -->
<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p>
</div>
<!-- End VideoJS -->
<script type="text/javascript" charset="utf-8">
var div = document.getElementById("test");
var vid = document.getElementById("example_video_1");
// vid.addEventListener("readystate", function(e){ console.log("hi"); }, false);
setInterval(function(){
div.value = vid.readyState;
}, 100)
</script>
</body>
</html>

3
video-js.css
View File

@ -21,7 +21,8 @@ video.video-js { background-color: #000; position: relative; }
.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
/* Subtiles Style */
.video-js-box .vjs-subtitles { color:#fff; font-size: 20px; text-align: center; bottom: 20px; left: 0; right: 0; position: absolute; z-index: 1002; }
/* Spinner Styles */
.video-js-box .vjs-spinner { display: none; }
/* DEFAULT SKIN (override in another file)
================================================================================

76
video.js
View File

@ -109,11 +109,13 @@ var VideoJS = JRClass.extend({
this.showPoster();
this.buildBigPlayButton();
this.buildSpinner();
this.buildController();
this.loadInterface();
// Position & show controls when data is loaded
this.video.addEventListener("loadeddata", this.onLoadedData.context(this), false);
this.video.addEventListener("loadstart", this.onLoadStart.context(this), false);
// Listen for when the video is played
this.video.addEventListener("play", this.onPlay.context(this), false);
@ -132,6 +134,16 @@ var VideoJS = JRClass.extend({
// Listen for Video time update
this.video.addEventListener('timeupdate', this.onTimeUpdate.context(this), false);
// When seeking occurs
this.video.addEventListener("seeking", this.onSeeking.context(this), false);
// When seeking has ended
this.video.addEventListener("seeked", this.onSeeked.context(this), false);
this.video.addEventListener("canplay", this.onCanPlay.context(this), false);
this.video.addEventListener("canplaythrough", this.onCanPlayThrough.context(this), false);
this.video.addEventListener("waiting", this.onWaiting.context(this), false);
this.video.addEventListener("stalled", this.onStalled.context(this), false);
// Listen for clicks on the big play button
this.bigPlayButton.addEventListener("click", this.onPlayControlClick.context(this), false);
@ -274,7 +286,7 @@ var VideoJS = JRClass.extend({
}
}
this.positionBox();
this.showBigPlayButton();
if(this.video.paused !== false) { this.showBigPlayButton(); }
if(this.options.showControlsAtStart) {
this.showController();
}
@ -366,6 +378,8 @@ var VideoJS = JRClass.extend({
this.controls.appendChild(this.fullscreenControl);
},
/* Big Play Button
================================================================================ */
buildBigPlayButton: function(){
/* Creating this HTML
<div class="vjs-big-play-button"><span></span></div>
@ -376,14 +390,20 @@ var VideoJS = JRClass.extend({
});
this.video.parentNode.appendChild(this.bigPlayButton);
},
showBigPlayButton: function(){ this.bigPlayButton.style.display = "block"; },
hideBigPlayButton: function(){ this.bigPlayButton.style.display = "none"; },
showBigPlayButton: function(){
this.bigPlayButton.style.display = "block";
},
hideBigPlayButton: function(){
this.bigPlayButton.style.display = "none";
/* Spinner (Loading)
================================================================================ */
buildSpinner: function(){
this.spinner = _V_.createElement("div", {
className: "vjs-spinner",
innerHTML: "<span>Loading...</span>"
});
this.video.parentNode.appendChild(this.spinner);
},
showSpinner: function(){ this.spinner.style.display = "block"; },
hideSpinner: function(){ this.spinner.style.display = "none"; },
// Get the download links block element
getLinksFallback: function(){
@ -533,6 +553,7 @@ var VideoJS = JRClass.extend({
// When the video is played
onPlay: function(event){
console.log("onPlay");
this.hasPlayed = true;
this.playControl.className = "vjs-play-control vjs-pause";
this.hidePoster();
@ -548,8 +569,8 @@ var VideoJS = JRClass.extend({
// When the video ends
onEnded: function(event){
this.video.pause();
this.video.currentTime = 0;
this.video.pause();
this.showPoster();
this.showBigPlayButton();
this.onPause();
@ -565,7 +586,42 @@ var VideoJS = JRClass.extend({
},
onLoadedData: function(event){
// this.showController();
console.log("loaded")
this.hideSpinner();
},
onSeeking: function(event){
this.showSpinner();
console.log("Seeking");
},
onSeeked: function(event){
this.hideSpinner();
console.log("Seeked");
},
onWaiting: function(event){
this.showSpinner();
console.log("waiting");
},
onStalled: function(event){
this.showSpinner();
console.log("waiting");
},
onLoadStart: function(event){
this.showSpinner();
console.log("loadstart");
},
onCanPlay: function(event){
this.hideSpinner();
console.log("CanPlay");
},
onCanPlayThrough: function(event){
console.log("CanPlayThrough");
},
// When the video's load progress is updated
@ -636,7 +692,7 @@ var VideoJS = JRClass.extend({
onProgressHolderMouseUp: function(event){
this.setPlayProgressWithEvent(event);
// Fixe for a play button state issue.
// Fix for a play button state issue.
if (this.video.paused) {
this.onPause();
} else {