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

Updated init script to allow for controls attribute to be false.

Browse Source
This commit is contained in:
Steve Heffernan 2011-11-15 13:27:37 -08:00
parent 3243b01e6c
commit 34c187cd9a
3 changed files with 36 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dev/dev.html
View File

@ -47,21 +47,9 @@
</head>
<body>
<video id="vid1" class="video-js vjs-default-skin" autoplay controls preload="none" width="640" height="264"
<video id="vid1" class="video-js vjs-default-skin" autoplay preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'>
<source src="http://www.youtube.com/watch?v=YjaZNYSt7o0&feature=related" type='video/youtube'>
<!-- <track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track> -->
<!-- <track kind="subtitles" src="demo-subtitles.srt" srclang="en-US" label="English"></track> -->
</video>
<video id="vid1" class="video-js vjs-default-skin" autoplay controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"techOrder":["html5","youtube"]}'>
data-setup='{"techOrder":["html5","h5swf","youtube"]}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>

57
dev/src/core.js
View File

@ -1,7 +1,7 @@
// HTML5 Shiv. Must be in <head>.
document.createElement("video");document.createElement("audio");
var VideoJS = _V_ = function(id, options){
var VideoJS = _V_ = function(id, addOptions){
// Allow for element or ID to be passed in.
var tag = (typeof id == "string" ? _V_.el(id) : id);
@ -17,10 +17,15 @@ var VideoJS = _V_ = function(id, options){
return tag.player || new VideoJS(id, options);
}
this.tag = tag;
var box = this.box = _V_.createElement("div"),
width = tag.width || 300,
height = tag.height || 150;
this.tag = tag; // The original tag used to set options
var box = this.box = _V_.createElement("div"), // Div to contain video and controls
options = this.options = {},
width = options.width = tag.width,
height = options.height = tag.height,
// Browsers default to 300x150 if there's no width/height or video size data.
initWidth = width || 300,
initHeight = height || 150;
// Make player findable on elements
tag.player = box.player = this;
@ -30,27 +35,30 @@ var VideoJS = _V_ = function(id, options){
box.appendChild(tag); // Breaks iPhone, fixed in HTML5 setup.
// Give video tag properties to box
box.id = tag.id; // ID will now reference box, not the video tag
box.id = this.id = tag.id; // ID will now reference box, not the video tag
box.className = tag.className;
box.setAttribute("width", width);
box.setAttribute("height", height);
box.style.width = width+"px";
box.style.height = height+"px";
// Strip tag of basic properties
// Update tag id/class for use as HTML5 playback tech
tag.id += "_html5_api";
tag.className = "vjs-tech";
// Make box use width/height of tag, or default 300x150
box.setAttribute("width", initWidth);
box.setAttribute("height", initHeight);
// Enforce with CSS since width/height attrs don't work on divs
box.style.width = initWidth+"px";
box.style.height = initHeight+"px";
// Remove width/height attrs from tag so CSS can make it 100% width/height
tag.removeAttribute("width");
tag.removeAttribute("height");
// Store controls setting, and then remove immediately so native controls don't flash.
options.controls = tag.getAttribute("controls") !== null;
tag.removeAttribute("controls");
// Same id for player/box
this.id = box.id;
// Default Options
this.options = _V_.options; // Global Defaults
_V_.merge(options, _V_.options); // Copy Global Defaults
_V_.merge(this.options, this.getVideoTagSettings()); // Override with Video Tag Options
_V_.merge(this.options, options); // Override/extend with options from setup call
_V_.merge(this.options, addOptions); // Override/extend with options from setup call
// Empty video tag sources and tracks so the built in player doesn't use them also.
if (tag.hasChildNodes()) {
@ -81,12 +89,14 @@ var VideoJS = _V_ = function(id, options){
this.addEvent("ended", this.handleEnded);
// Build controls when the API is ready
this.addEvent("techready", _V_.proxy(this, function(){
this.each(this.options.controlSets, function(set){
_V_.controlSets[set].add.call(this);
// When the API is ready, loop through the controlsets and add to the player.
if (this.options.controls) {
this.addEvent("techready", function(){
this.each(this.options.controlSets, function(set){
_V_.controlSets[set].add.call(this);
});
});
}));
}
// Loop through playback technologies (HTML5, Flash) and check for support
// Then load the best source.
@ -113,13 +123,10 @@ VideoJS.fn = VideoJS.prototype = {
tracks: []
};
options.width = this.tag.width;
options.height = this.tag.height;
options.src = this.tag.src;
options.poster = this.tag.poster;
options.preload = this.tag.preload;
options.autoplay = this.tag.getAttribute("autoplay") !== null; // hasAttribute not IE <8 compatible
options.controls = this.tag.getAttribute("controls") !== null;
options.loop = this.tag.getAttribute("loop") !== null;
options.muted = this.tag.getAttribute("muted") !== null;

3
dev/src/tech/html5.js
View File

@ -42,7 +42,8 @@ VideoJS.tech.html5 = {
this.triggerEvent("loadstart");
}
// Moving video inside box breaks autoplay on Safari.
// Moving video inside box breaks autoplay on Safari. This forces it to play.
// Currently triggering play in other browsers as well.
this.addEvent("techready", function(){
if (this.options.autoplay && this.paused()) {
this.play();