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
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
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've forked little brother called AudioJS http://dz0ny.github.com/AudioJS/
Going full screen on the Ipad leaves the browser bar visible. Both in normal and landscape mode.
In init of video.js the current player's position in the videoJSPlayers array is not set to this.num
this.num = num;
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?
Here is my HTML TAG...urls are dynamic and have been checked to be accurate.
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
<!-- 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.
Can the player stream m4v files?
If so whats the codecs line i should be using on this tag
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
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.
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.
It looks like the source doesn't ship with a license. May I suggest the MIT?
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.....
is it possible/easy to do this with the current functionality?
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?
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
Even when adding data-subtitles to my video tag subtitles do not show up.
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.
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:
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; }
?
IN Ubuntu 8.04.3 LTS AND Mozilla Firefox 3.0.12 NOT VIDEO AND NOT PLAY
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 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.
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?
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;
}
}
},
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.
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);
--
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.
This may be something you might want to merge into the master.
http://github.com/majornista/video-js/commit/3fa3497e0ba7077c543ec6d84e0f162df61c5a23
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
iOS is 4.2 8C5091e and test in Simulator under OS X 10.6.4
video.js is latest git version
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.
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.
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
The poster image disappears in Safari (latest 4.0.5) after loading, and the player then turns black?
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
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!
I just tried to run the demo video on Safari 5 (on a Mac) and it would would not go to fullscreen.
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
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.)
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.'", ';
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
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.
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;
}
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?
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.