videojs / video.js Goto Github PK
View Code? Open in Web Editor NEWVideo.js - open source HTML5 video player
Home Page: https://videojs.com
License: Other
Video.js - open source HTML5 video player
Home Page: https://videojs.com
License: Other
Can the player stream m4v files?
If so whats the codecs line i should be using on this tag
I'm surprised that I can find no mention of this issue anywhere, as it seems incredibly basic and common. The problem is that if you have multiple
It appears that multiple controls are created all in the same place on top of each other, not attached to the actual videos.
This is a pretty killer issue for me, as I very much need to display multiple videos on a page all with their proper controls. So far, I can only get one of them to actually have usable controls at a time, by specifically using the addVideos() function instead of setup().
It looks like setup should be going through all the video tags on the page, adding them to an array and then creating a videoJS instance for each but it's obviously not doing it for me. Checked in Chrome, Safari and Firefox. The iPad is even weirder as it overlays standard controls on the custom ones.
Problem shown here: http://teachoct.com/dev/zencoder/demo.html
I can get the controls only by right clicking >show controls. They don't show up on hover. Once I enabled them they do show on hover. Is there a param to enable them by default? Am I missing something?
It seems to work fine on http://videojs.com/ both in firefox and chrome. Anyone else experiencing this?
It looks like the source doesn't ship with a license. May I suggest the MIT?
If one enters full-screen mode in Opera (typically F11) and then selects full-window mode, the mouse pointer has nowhere to hover but over the video and thus the controls never go away.
I've tested the demos on your website but them don't work on Android (my version is 2.1).
It shows me only a static image.
As stated here: http://news.ycombinator.com/item?id=1398889
It would be nice if the "ESC" button would call the same function ("onFullscreenControlClick") when the "ESC" button is clicked.
I have received an odd response by Infrenion hosting.
I tried to use your player, but it just doesnt work for my site. On contacting Infrenion, they seem to think that I cant use HTML5 on my hosting package (shared server) as this video code requires a H264 codec?
Are OGG and WEBM not opensource alternatives to H264?
What do you think the issue really is here?
I just tried to run the demo video on Safari 5 (on a Mac) and it would would not go to fullscreen.
Firefox 3.6.6 will not honor preload="none" it loads the video automatically, while Safari does honor the preload="none".
However, if I remove the preload="none", Firefox will not preload, but Safari starts to preload.
Is this a bug?
Here is the code I am using:
Thanks!
When playing the demos on videojs.com, the first playback works well. When trying to play the video again, the play button does not work any longer.
Browser: 6.0.492.0 (55833) Ubuntu 10.04
IN Ubuntu 8.04.3 LTS AND Mozilla Firefox 3.0.12 NOT VIDEO AND NOT PLAY
Full page is broken in Safari. nativeFullscreenOn isn't returning false when this.video.webkitEnterFullScreen throws an error. Adding a return false in the catch block fixes it:
nativeFullscreenOn: function(){
if(typeof this.video.webkitEnterFullScreen == 'function') {
// Seems to be broken in Chromium/Chrome
if (!navigator.userAgent.match("Chrome")) {
try {
this.video.webkitEnterFullScreen();
} catch (e) {
if (e.code == 11) { this.errors.push(VideoJS.errorCodes.videoNotReady); }
return false;
}
return true;
}
}
},
SORRY ACCIDENTALLY CLOSED THIS - SO RE-POSTED
I have received an odd response by Infrenion hosting.
I tried to use your player, but it just doesnt work for my site. On contacting Infrenion, they seem to think that I cant use HTML5 on my hosting package (shared server) as this video code requires a H264 codec?
Are OGG and WEBM not opensource alternatives to H264?
What do you think the issue really is here?
Comments heff 12 minutes ago
Do they not support hosting specific video types (MP4/h.264)? That seems weird.
OGG and WebM are open source alternatives, but some browsers (Safari specifically) don't support them, and only support H.264.
You might try these instructions from Video for Everybody:
Ensure your server is using the correct mime-types. Firefox will not play the OGG video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Louizem 9 minutes ago
Thanks thats what I thought too.
Yes, already have that in the htaccess. It just doesnt work. The only thing I can think of is the hosting, but I dont think they understand html5 / opensource video.....
How can you add an .srt to the video playback ?
Also whenever i try a skin other than the default, they load, but are just completely buggy looking and don't display correctly... I am using Google Chrome 6 Beta
-Kouta
The line with if (!this.subtitles) { this.currentSubtitlePosition = 0; }
( http://github.com/zencoder/video-js/blob/master/video.js#L745 )
Should it not be
if (this.subtitles) { this.currentSubtitlePosition = 0; }
?
<!-- Begin VideoJS -->
<div class="hu-css video-js-box">
Vimeo and Youtube don't fire. Also it first loads the native controls and then applies the style.
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
Remove 'controls preload' when using a skin.
Supporting captions would make this project even more desirable. Loading from a standard captioning format like .srt or .adb.xml and displaying over the video via Javascript.
When testing the videojs player on an iPad, and pressing the 'full screen' button the controls are not accessible and the only way to control the video is to 'zoom' the video using the reverse-pinch gesture, and then accessing the native iOS video controls.
Given this I would suggest that this could be fixed by either hiding the full-window button when on an iOS device (users can use the reverse-pinch gesture to go full display-sized without this) or listen for the touch events to hide/show the video controls.
in the file video-js-wp.php
change the following lines from line 59 60 61.
if ($poster) {
$poster_attribute = 'poster="'.$poster.'"';
$flow_player_poster = '"http://video-js.zencoder.com/oceans-clip.png", ';
change to:
if ($poster) {
$poster_attribute = 'poster="'.$poster.'"';
$flow_player_poster = '"'.$poster.'", ';
I did not see this issue in an other post, so pardon me if it already has been addressed. BTW - very elegant implementation. Works flawlessly on MAC. The only issue I have run into is that the poster image is not showing in IE at all. I have used FLOW PLAYER before and have not encountered this in stand alone usage. So, it seems something in the implementation within the videojs script has altered the FLOW PLAYER functionality. Its evident when visiting: http://videojs.com/ in IE.
Any suggestions? Is this something that is being worked on? Am I the only one seeing this? Other than this one issue the script seems to work flawlessly.
thanks,
Christopher
No poster when tested on IE and FF 3.6.x.
Flowplayer can display a poster referenced in an img tag. Is this feature not currently available in video-js?
This may be something you might want to merge into the master.
http://github.com/majornista/video-js/commit/3fa3497e0ba7077c543ec6d84e0f162df61c5a23
I found this issue while developing an offline web app for the iPad.
Even with an internet connection, if a cache-manifest is present, the video will play fine only on the first load. Afterward, the video object's currentSrc property returns "" and the video fails to play.
I managed to find a solution to this. Setting the src attribute on the video tag fixes the problem.
In init of video.js the current player's position in the videoJSPlayers array is not set to this.num
this.num = num;
Should protect Google Chrome by checking volume value and using default if value = NaN
refers to http://code.google.com/p/chromium/issues/detail?id=64447
Hello.
I'm using the latest version of Chrome with Win 7. If I start the "Disney's Ocean" vid on your website, the video starts to play, but the controls disappear and won't come bach when I hover over the video. I can click on the video to pause and restart it, but the controls won't return, even after the video is over. I have to refresh the page to geth them back.
Seems to work woth other browsers though.
tr
I've forked little brother called AudioJS http://dz0ny.github.com/AudioJS/
iOS is 4.2 8C5091e and test in Simulator under OS X 10.6.4
video.js is latest git version
Going full screen on the Ipad leaves the browser bar visible. Both in normal and landscape mode.
Even when adding data-subtitles to my video tag subtitles do not show up.
Had a problem with a dropdown rendring behind the flash fallback. adding:
param name="wmode" value="transparent"
to the html seems to fix this problem.
Hi everyone,
I've gotten the player working on both my macbook and iphone, however, on the iPhone once the player is fully loaded the default, circular play button in the center of the poster image disappears. I can still play the video by tapping where the circular play button should be (but nowhere else on the image seems to register that I want to play the video). If I exit the video midway through it's playback the circular button is visible overtop of the thumbnail image on the website, and functions as expected. I like having the videoJS controls overlaid on the thumbnail and poster image on the iPhone, but would like to also have that default circular play button. On the macbook everything runs as expected and smoothly. Any suggestions on how to fix the iPhone problem?
Video controls are disabled before "this" is initialized. Should be swapped.
// Hide default controls
this.video.controls = false;
// Allow an ID string or an element
if (typeof element == 'string') {
this.video = document.getElementById(element);
} else {
this.video = element;
}
The poster image disappears in Safari (latest 4.0.5) after loading, and the player then turns black?
I'm having a problem with IE8, the flash player plays the sound but doesn't show any video. Here's a sample page:
http://phoenixart.com/gallery/test.html
I'm trying to embed this player in a web page in QtWebKit and when I click on either of those buttons nothing happens. I've modified the javascript to display an alert on click, that never happens. Play button and location bar work just fine. If you tell me what platform you're testing on I can provide a test app to demonstrate the issue.
Here is my HTML TAG...urls are dynamic and have been checked to be accurate.
When using VideoJS on an iPad, 2 control sets tend to appear (both the VideoJS skin controls, and the default quicktime player controls).
If you view the skins page on an iPad, it produces the same problem as I've been having.
However, if you view your homepage www.videojs.com on an iPad it doesn't have that problem.
After a long time debugging to figure out why the controls were appearing on my own project, and not on your homepage example at www.videojs.com ...
It appears that Google Analytics is stopping the Quicktime controls from appearing.
I have no idea why Google Analytics would interfere in this way, but it's doing the job, and will have to be a 'fix' for the project I'm working on.
Hopefully this will give you some guidance with where to fix this properly.
Regards,
Alan.
I have my video set to autoplay. In Safari and Chrome, the pause button is showing which is correct. In FF and Opera, it shows the play button, instead of the pause button. Any suggestions?
On a side note. Anything I can change in the code so player controls disappear after a few seconds. Right now, when the video autoplays, the player controls stay visible until I hover then remove cursor from video. It would be perfect if the controls would automatically disappear after 3 to 5 seconds of video playing.
Thanks ahead of time for any suggestions. Fantastic video player overall.
Tony
If I put a
in the same box of
, ignoring its class.
I think is better getting a specific paragraph, with a custom class.
If the default controls are used, they are not hidden by video-js. This can be prevented by adding one line to video.js.
Patch:
--- a/video.js
+++ b/video.js
@@ -40,6 +40,9 @@ var VideoJS = Class.extend({
this.buildController();
this.showController();
+
+ // Hide default controls
+ this.video.controls = false;
// Position & show controls when data is loaded
this.video.addEventListener("loadeddata", this.onLoadedData.context(this), false);
--
is it possible/easy to do this with the current functionality?
In iPhone, when loading the page with player, the poster is shown and on clicking, it plays the video in the Quick time player and not in the HTML5 player. Is this the default behavior
Hello,
I can get the video to autoplay by adding 'autoplay' to the
and setting autoPlay='true' in flash vars like this:
<param name="flashvars" value='config={"clip":{"url":"video.mp4","autoPlay":true,"autoBuffering":true}}' />
The problem I'm having is that about half the time the video will start playing and then the background image will replace the video. I can still hear the audio so the video is still playing, but the only way to see it is to click the play button which pauses it and then click the play button again to watch it.
How can I disable the image substitution when I want it to autoplay.
Thanks,
Daniel
I've been caught a few times by a selection when that clearly wasnt what I wanted.
Text selection should be disabled within the controls element, I'd think.
Yah?
(webkit and moz prefixes, of course, too.)
Although the volume controls seem to work on a visual level when using the iPad, they don't actually cause the volume to change whatsoever.
When I put the first video in the list in the fullscreen it does not overlap others videos on the page, so I see them too. I just put several video block one by one:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.