mirror of
https://github.com/videojs/video.js.git
synced 2025-01-29 11:23:10 +02:00
Forcing fallback to flash when source isn't supported
This commit is contained in:
Steve Heffernan
parent
27460d4e46
commit
3d6d2154f8
@ -26,9 +26,6 @@
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- Include the VideoJS Stylesheet -->
|
||||
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
|
||||
</head>
|
||||
@ -40,12 +37,12 @@
|
||||
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
|
||||
<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.ogg" type='video/ogg; codecs="theora, vorbis"'>
|
||||
<object width="640" height="264" type="application/x-shockwave-flash"
|
||||
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'> -->
|
||||
<object 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={"clip":"http://video-js.zencoder.com/oceans-clip.mp4"}' />
|
||||
<param name="flashvars" value='config={"clip":{"url":"http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}}' />
|
||||
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
|
||||
title="No video playback capabilities." />
|
||||
</object>
|
||||
|
||||
87
video.js
87
video.js
@ -29,8 +29,6 @@ var VideoJS = Class.extend({
|
||||
// num: the current player's position in the videoJSPlayers array
|
||||
init: function(element, setOptions){
|
||||
|
||||
if(!VideoJS.browserSupportsVideo()) return;
|
||||
|
||||
this.video = element;
|
||||
|
||||
// Default Options
|
||||
@ -38,20 +36,31 @@ var VideoJS = Class.extend({
|
||||
num: 0, // Optional tracking of videoJSPLayers position
|
||||
controlsBelow: false, // Display control bar below video vs. on top
|
||||
controlsHiding: true, // Hide controls when not over the video
|
||||
defaultVolume: 0.85 // Will be overridden by localStorage volume if available
|
||||
defaultVolume: 0.85, // Will be overridden by localStorage volume if available
|
||||
flashVersion: 9
|
||||
};
|
||||
|
||||
// Override default options with set options
|
||||
if (typeof setOptions == "object") _V_.merge(this.options, setOptions);
|
||||
|
||||
this.box = this.video.parentNode;
|
||||
this.flashFallback = this.getFlashFallback();
|
||||
this.linksFallback = this.getLinksFallback();
|
||||
this.percentLoaded = 0;
|
||||
|
||||
// if (this.canPlaySource()) {
|
||||
//
|
||||
// }
|
||||
if (VideoJS.browserSupportsVideo()) {
|
||||
if (this.canPlaySource() == false) {
|
||||
this.hideLinksFallback();
|
||||
this.replaceWithFlash();
|
||||
return;
|
||||
}
|
||||
} else if (VideoJS.browserFlashVersion() >= this.options.flashVersion) {
|
||||
this.hideLinksFallback();
|
||||
return;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
this.hideDownloadLinks();
|
||||
this.hideLinksFallback();
|
||||
|
||||
if (VideoJS.isIpad()) {
|
||||
this.options.controlsBelow = true;
|
||||
@ -235,14 +244,32 @@ var VideoJS = Class.extend({
|
||||
this.controls.appendChild(this.fullscreenControl);
|
||||
},
|
||||
|
||||
// Get the download links block element
|
||||
getLinksFallback: function(){
|
||||
return this.box.getElementsByTagName("P")[0];
|
||||
},
|
||||
|
||||
// Hide no-video download paragraph
|
||||
hideDownloadLinks: function(){
|
||||
var children = this.box.children;
|
||||
for(var i=0; i<children.length; i++){
|
||||
if(children[i].className == "vjs-no-video") children[i].style.display = "none";
|
||||
hideLinksFallback: function(){
|
||||
if (this.linksFallback) this.linksFallback.style.display = "none";
|
||||
},
|
||||
|
||||
getFlashFallback: function(){
|
||||
if (VideoJS.isIE()) return;
|
||||
var children = this.box.getElementsByClassName("vjs-flash-fallback");
|
||||
for (var i=0; i<children.length; i++) {
|
||||
if (children[i].tagName.toUpperCase() == "OBJECT") {
|
||||
return children[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
replaceWithFlash: function(){
|
||||
// this.flashFallback = this.video.removeChild(this.flashFallback);
|
||||
this.box.appendChild(this.flashFallback);
|
||||
this.video.style.display = "none"; // Removing it was breaking later players
|
||||
},
|
||||
|
||||
// Show the controller
|
||||
showController: function(){
|
||||
this.controls.style.display = "block";
|
||||
@ -331,6 +358,7 @@ var VideoJS = Class.extend({
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// When the video is played
|
||||
@ -602,12 +630,11 @@ var VideoJS = Class.extend({
|
||||
|
||||
// Add video-js to any video tag with the class
|
||||
VideoJS.setup = function(){
|
||||
if (VideoJS.browserSupportsVideo()) {
|
||||
var videoTags = document.getElementsByTagName("video");
|
||||
for (var i=0;i<videoTags.length;i++) {
|
||||
if (videoTags[i].className.indexOf("video-js") != -1) {
|
||||
videoJSPlayers[i] = new VideoJS(videoTags[i], { num: i });
|
||||
}
|
||||
var videoCount = document.getElementsByTagName("video").length
|
||||
for (var i=0;i<videoCount;i++) {
|
||||
videoTag = document.getElementsByTagName("video")[i];
|
||||
if (videoTag.className.indexOf("video-js") != -1) {
|
||||
videoJSPlayers[i] = new VideoJS(videoTag, { num: i });
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -621,12 +648,26 @@ VideoJS.isIpad = function(){
|
||||
return navigator.userAgent.match(/iPad/i) != null;
|
||||
}
|
||||
|
||||
VideoJS.browserSupportsFlash = function(){
|
||||
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) {
|
||||
return 1
|
||||
} else {
|
||||
return 0
|
||||
VideoJS.browserFlashVersion = function(){
|
||||
if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") {
|
||||
desc = navigator.plugins["Shockwave Flash"].description;
|
||||
if (desc && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)) {
|
||||
return parseInt(desc.match(/^.*\s+([^\s]+)\.[^\s]+\s+[^\s]+$/)[1]);
|
||||
}
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
try {
|
||||
var testObject = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
|
||||
if (testObject) {
|
||||
return parseInt(testObject.GetVariable("$version").match(/^[^\s]+\s(\d+)/)[1]);
|
||||
}
|
||||
}
|
||||
catch(e) { return false; }
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
VideoJS.isIE = function(){
|
||||
return !+"\v1"
|
||||
}
|
||||
|
||||
// Convenience Functions (mini library)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user