From 8eedbe6a382c59e6479a03d4aaf945d84a7ec573 Mon Sep 17 00:00:00 2001 From: Steve Heffernan Date: Thu, 21 Oct 2010 21:33:00 -0700 Subject: [PATCH] Started spinner --- README.markdown | 1 + test.html | 112 ++++++++++++++++++++++++++++++++++++++++++++++++ video-js.css | 3 +- video.js | 76 +++++++++++++++++++++++++++----- 4 files changed, 181 insertions(+), 11 deletions(-) create mode 100644 test.html diff --git a/README.markdown b/README.markdown index 9ba76df2b..fdc87cd4d 100644 --- a/README.markdown +++ b/README.markdown @@ -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 diff --git a/test.html b/test.html new file mode 100644 index 000000000..34a068199 --- /dev/null +++ b/test.html @@ -0,0 +1,112 @@ + + + + + HTML5 Video Player + + + + + + + + + + + + + + +
+ + + +

Download Video: + MP4, + WebM, + Ogg
+ + HTML5 Video Player by VideoJS +

+
+ + + + + + \ No newline at end of file diff --git a/video-js.css b/video-js.css index 52e5b4844..d41e9988d 100644 --- a/video-js.css +++ b/video-js.css @@ -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) ================================================================================ diff --git a/video.js b/video.js index 09b821e73..704479b85 100644 --- a/video.js +++ b/video.js @@ -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
@@ -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: "Loading..." + }); + 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 {