mirror of
https://github.com/videojs/video.js.git
synced 2024-12-25 02:42:10 +02:00
Fix: Issue with big play button when multiple videos are on the page.
This commit is contained in:
Steve Heffernan
parent
bc5c1af20a
commit
240030fe4d
@ -133,6 +133,7 @@ Changelog
|
||||
---------
|
||||
2.0.1 (2010-11-22)
|
||||
|
||||
- Fix: Issue with big play button when multiple videos are on the page.
|
||||
- Fix: Optimized play progress tracking.
|
||||
- Fix: Optimized buffer progress checking.
|
||||
- Fix: Firefox not showing Flash fallback object.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*
|
||||
VideoJS - HTML5 Video Player
|
||||
v2.0.0
|
||||
v2.0.1
|
||||
|
||||
This file is part of VideoJS. Copyright 2010 Zencoder, Inc.
|
||||
|
||||
|
||||
@ -469,23 +469,25 @@ VideoJS.player.newBehavior("fullscreenToggle", function(element){
|
||||
/* Big Play Button Behaviors
|
||||
================================================================================ */
|
||||
VideoJS.player.newBehavior("bigPlayButton", function(element){
|
||||
if (!this.elements.bigPlayButtons) {
|
||||
this.elements.bigPlayButtons = [];
|
||||
console.log(this)
|
||||
if (!this.bigPlayButtons) {
|
||||
this.bigPlayButtons = [];
|
||||
this.onPlay(this.bigPlayButtonsOnPlay);
|
||||
this.onEnded(this.bigPlayButtonsOnEnded);
|
||||
}
|
||||
this.elements.bigPlayButtons.push(element);
|
||||
this.bigPlayButtons.push(element);
|
||||
this.activateElement(element, "playButton");
|
||||
},{
|
||||
bigPlayButtonsOnPlay: function(event){ this.hideBigPlayButtons(); },
|
||||
bigPlayButtonsOnEnded: function(event){ this.showBigPlayButtons(); },
|
||||
showBigPlayButtons: function(){
|
||||
this.each(this.elements.bigPlayButtons, function(element){
|
||||
showBigPlayButtons: function(){
|
||||
this.each(this.bigPlayButtons, function(element){
|
||||
element.style.display = "block";
|
||||
});
|
||||
},
|
||||
hideBigPlayButtons: function(){
|
||||
this.each(this.elements.bigPlayButtons, function(element){
|
||||
hideBigPlayButtons: function(){
|
||||
console.log(this.bigPlayButtons)
|
||||
this.each(this.bigPlayButtons, function(element){
|
||||
element.style.display = "none";
|
||||
});
|
||||
}
|
||||
@ -556,11 +558,11 @@ VideoJS.player.newBehavior("spinner", function(element){
|
||||
/* Subtitles
|
||||
================================================================================ */
|
||||
VideoJS.player.newBehavior("subtitlesDisplay", function(element){
|
||||
if (!this.elements.subtitlesDisplays) {
|
||||
this.elements.subtitlesDisplays = [];
|
||||
if (!this.subtitlesDisplays) {
|
||||
this.subtitlesDisplays = [];
|
||||
_V_.addListener(this.video, "timeupdate", this.subtitlesDisplaysOnVideoTimeUpdate.context(this));
|
||||
}
|
||||
this.elements.subtitlesDisplays.push(element);
|
||||
this.subtitlesDisplays.push(element);
|
||||
},{
|
||||
subtitlesDisplaysOnVideoTimeUpdate: function(){
|
||||
// show the subtitles
|
||||
@ -586,7 +588,7 @@ VideoJS.player.newBehavior("subtitlesDisplay", function(element){
|
||||
}
|
||||
},
|
||||
updateSubtitlesDisplays: function(val){
|
||||
this.each(this.elements.subtitlesDisplays, function(disp){
|
||||
this.each(this.subtitlesDisplays, function(disp){
|
||||
disp.innerHTML = val;
|
||||
});
|
||||
}
|
||||
|
||||
@ -68,6 +68,7 @@ var VideoJS = JRClass.extend({
|
||||
this.extend(functions);
|
||||
},
|
||||
activateElement: function(element, behavior){
|
||||
// if (behavior == "bigPlayButton") { console.log(this.video.id) }
|
||||
this.behaviors[behavior].call(this, element);
|
||||
},
|
||||
/* Errors/Warnings
|
||||
|
||||
116
dev/test.html
116
dev/test.html
@ -13,49 +13,50 @@
|
||||
<!-- <script src="flowplayer/video-js.flowplayer.js" type="text/javascript" charset="utf-8"></script> -->
|
||||
|
||||
<script type="text/javascript">
|
||||
VideoJS.setupAllWhenReady();
|
||||
VideoJS.DOMReady(function(){
|
||||
myPlayer = VideoJS.setup("example_video_1", {
|
||||
// controlsHiding: true,
|
||||
// controlsBelow: false,
|
||||
// showControlsAtStart: true
|
||||
});
|
||||
myPlayer.activateElement(document.getElementById("scrub"), "playProgressBar");
|
||||
var vid = document.getElementById("example_video_1"),
|
||||
attrTable = document.getElementById("attributes"),
|
||||
attrNames = ["error", "networkState", "readyState", "preload", "buffered",
|
||||
"seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
|
||||
"paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
|
||||
"ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
|
||||
],
|
||||
attrs = {};
|
||||
|
||||
for(var i=0,j=attrNames.length; i<j; i++) {
|
||||
var row = _V_.createElement("tr");
|
||||
var th = _V_.createElement("th");
|
||||
th.innerHTML = attrNames[i];
|
||||
attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
|
||||
row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
|
||||
attrTable.appendChild(row);
|
||||
}
|
||||
|
||||
setInterval(function(){
|
||||
for(var i=0,j=attrNames.length; i<j; i++) {
|
||||
attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
|
||||
}
|
||||
}, 100);
|
||||
|
||||
var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
|
||||
"loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
|
||||
// "timeupdate",
|
||||
"ended", "ratechange", "durationchange","volumechange"
|
||||
],
|
||||
eventsList = document.getElementById("events");
|
||||
|
||||
for(var i=0,j=events.length; i<j; i++) {
|
||||
_V_.addListener(vid, events[i], function(){
|
||||
eventsList.innerHTML = this + "\n" + eventsList.innerHTML
|
||||
}.context(events[i]));
|
||||
}
|
||||
// myPlayer = VideoJS.setup("example_video_1", {
|
||||
// // controlsHiding: true,
|
||||
// // controlsBelow: false,
|
||||
// // showControlsAtStart: true
|
||||
// });
|
||||
// myPlayer.activateElement(document.getElementById("scrub"), "playProgressBar");
|
||||
// var vid = document.getElementById("example_video_1"),
|
||||
// attrTable = document.getElementById("attributes"),
|
||||
// attrNames = ["error", "networkState", "readyState", "preload", "buffered",
|
||||
// "seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
|
||||
// "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
|
||||
// "ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
|
||||
// ],
|
||||
// attrs = {};
|
||||
//
|
||||
// for(var i=0,j=attrNames.length; i<j; i++) {
|
||||
// var row = _V_.createElement("tr");
|
||||
// var th = _V_.createElement("th");
|
||||
// th.innerHTML = attrNames[i];
|
||||
// attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
|
||||
// row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
|
||||
// attrTable.appendChild(row);
|
||||
// }
|
||||
//
|
||||
// setInterval(function(){
|
||||
// for(var i=0,j=attrNames.length; i<j; i++) {
|
||||
// attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
|
||||
// }
|
||||
// }, 100);
|
||||
//
|
||||
// var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
|
||||
// "loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
|
||||
// // "timeupdate",
|
||||
// "ended", "ratechange", "durationchange","volumechange"
|
||||
// ],
|
||||
// eventsList = document.getElementById("events");
|
||||
//
|
||||
// for(var i=0,j=events.length; i<j; i++) {
|
||||
// _V_.addListener(vid, events[i], function(){
|
||||
// eventsList.innerHTML = this + "\n" + eventsList.innerHTML
|
||||
// }.context(events[i]));
|
||||
// }
|
||||
|
||||
});
|
||||
|
||||
@ -82,7 +83,36 @@
|
||||
<video data-subtitles="../demo-subtitles.srt" id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="none" 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"' /> -->
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
|
||||
<!-- <track kind="subtitles" src="../demo-subtitles.srt" srclang="en-US" label="English"></track> -->
|
||||
<!-- 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 -->
|
||||
|
||||
<div class="video-js-box">
|
||||
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
|
||||
<video data-subtitles="../demo-subtitles.srt" id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="none" 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"' />
|
||||
<!-- <track kind="subtitles" src="../demo-subtitles.srt" srclang="en-US" label="English"></track> -->
|
||||
<!-- 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"
|
||||
|
||||
18
video.js
18
video.js
@ -217,7 +217,7 @@ VideoJS.flashPlayers.htmlObject = {
|
||||
this.triggerResizeListeners();
|
||||
return this;
|
||||
}
|
||||
return this.element.offsetWidth;
|
||||
return this.element.width;
|
||||
},
|
||||
height: function(height){
|
||||
if (height !== undefined) {
|
||||
@ -226,7 +226,7 @@ VideoJS.flashPlayers.htmlObject = {
|
||||
this.triggerResizeListeners();
|
||||
return this;
|
||||
}
|
||||
return this.element.offsetHeight;
|
||||
return this.element.height;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -822,8 +822,9 @@ VideoJS.player.extend({
|
||||
this.values.bufferStart = 0;
|
||||
this.values.bufferEnd = 0;
|
||||
}
|
||||
if (this.video.buffered && this.video.buffered.length > 0 && this.video.buffered.end(0) > this.values.bufferEnd) {
|
||||
this.values.bufferEnd = this.video.buffered.end(0);
|
||||
if (this.video.buffered && this.video.buffered.length > 0) {
|
||||
var newEnd = this.video.buffered.end(0);
|
||||
if (newEnd > this.values.bufferEnd) { this.values.bufferEnd = newEnd; }
|
||||
}
|
||||
return [this.values.bufferStart, this.values.bufferEnd];
|
||||
},
|
||||
@ -894,17 +895,20 @@ VideoJS.player.newBehavior("player", function(player){
|
||||
this.onError(this.playerOnVideoError);
|
||||
// Listen for when the video is played
|
||||
this.onPlay(this.playerOnVideoPlay);
|
||||
this.onPlay(this.trackCurrentTime);
|
||||
// Listen for when the video is paused
|
||||
this.onPause(this.playerOnVideoPause);
|
||||
this.onPause(this.stopTrackingCurrentTime);
|
||||
// Listen for when the video ends
|
||||
this.onEnded(this.playerOnVideoEnded);
|
||||
// Set interval for load progress using buffer watching method
|
||||
this.trackCurrentTime();
|
||||
// this.trackCurrentTime();
|
||||
this.trackBuffered();
|
||||
// Buffer Full
|
||||
this.onBufferedUpdate(this.isBufferFull);
|
||||
},{
|
||||
playerOnVideoError: function(event){
|
||||
playerOnVideoError: function(event){
|
||||
this.log(event);
|
||||
this.log(this.video.error);
|
||||
},
|
||||
playerOnVideoPlay: function(event){ this.hasPlayed = true; },
|
||||
@ -918,7 +922,7 @@ VideoJS.player.newBehavior("player", function(player){
|
||||
// Buffer watching method for load progress.
|
||||
// Used for browsers that don't support the progress event
|
||||
trackBuffered: function(){
|
||||
this.bufferedInterval = setInterval(this.triggerBufferedListeners.context(this), 200);
|
||||
this.bufferedInterval = setInterval(this.triggerBufferedListeners.context(this), 500);
|
||||
},
|
||||
stopTrackingBuffered: function(){ clearInterval(this.bufferedInterval); },
|
||||
bufferedListeners: [],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user