I can't have the player working on IE8 with win xp (works well on IE8 with win 7)
I have two "source" tag with one ogv file and one mp4 file.
The player tags are added to the dom with ajax.
Then, the video-js player is loaded with "_V_("videoID", ..."
As said before, it works well with newer configurations, so the code is right.
If the player tags are not added to the dom with ajax, it works well. But in my case, I need to add them this way.
What I see when I load the page is that the player is there, the big play button is there. When I click play, I get the beginning of the video then it stops. Furthermore, the video is not in the good resolution, it's smaller and in the top left corner!
See picture (black is the player, and the white square is the badly shrinked video ):
In addition to that, I have a javascript error on line 1191 :
(I tried to comment out the line just to see what happens but no change)
handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
Using : Version 3.2.0
Thanks for any help
PS: sound can be heard but it's all jerky and CPU hits 100% when playing
Found the bug!
I used the "seekIntro" function when the video is loaded.
When I remove the ".addEvent" line it works fine!
_V_("videoTag-<%=luo_Video.getId()%>").ready(function(){
myPlayer = this;
myPlayer.addEvent("loadeddata", seekIntro);
});
function seekIntro(){
myPlayer.currentTime(4);
}
Related
I have two live videos feeding an encoder which creates H.264 chunk files and an HLS manifest which is being served by an apache web server.
A browser page using video.js shows a player. Pressing "play" on the browser properly plays the video. It works well.
However, if we change video sources (by flipping the switch in the picture below), there is a considerable delay (10 seconds) before the new content is displayed in the player. I'd like to get that to 3 seconds.
It appears that video.js and/or the HTML5 player in browser is buffering that amount of content. (if you delete the files on the web server, kill apache, or even pull the ethernet cable, the video keeps on playing!)
A button on the web page controls the switch. When clicked, I would also like to clear or reset the player so that it immediately re-reads the index.m3u8 manifest and downloads the new chunks.
So far, haven't found anything promising searching the internet or in the video.js API docs. There are lots of articles on API calls for fetching the current buffer percentage but cannot find any API for clearing it altogether.
Any ideas?
The encoder is set for 3 second chunks and the playlist depth is set for 10 entries.
I had a similar problem. Since i could not find a reliable API for this, i came up with a rather dirty workaround to clear the buffer:
var ctime = player.currentTime();
player.currentTime(0);
player.currentTime(ctime);
This currently works for me in all major browsers.
I have an embedded HTML5 video which works fine in all browsers (or fails gracefully, if the browser is old or lacks video support). But since my site uses iDangerous Swiper (http://www.idangero.us/sliders/swiper/api.php), the custom video controls - the 'play/pause' button - does not work in Internet Explorer 10.
If I remove the swiper js code embed from the head area of my HTML, the embedded video plays fine in ie10. The problem seems to be that Swiper is intercepting the click on the play button in ie10 - and therefore the solution seems to be to disable Swiper for at least that small area of the page.
But it's not clear how to do it.
There seems to be a very scantly documented new feature in the June 2013 Swiper release which lets one create a 'noSwiping' class, but wrapping the video in a div with this class does not solve the ie10 problem.
Has anyone else needed to disable Swiper for an element and succeeded in doing so, particularly regarding ie...? I would be very glad to see a code example. My own project is still on localhost.
All you have to do is to add the html5=1 in the src attribute of the iframe :
The video will be displayed as HTML5 if available, or fallback into flash player.
you can read this:
Force HTML5 youtube video
I had a problem with a embed video of youtube inside a dangerous swiper, but the solution of TSL works for me!
I had added the html5=1 and solve my problem!
thanks!
I have a video thumbnail on the top right of this screen that, when clicked, plays fine in Firefox. However, in Chrome and Safari the video will not play. The loading image spins forever and will not continue to the video.
Any advice is much appreciated. I have tried upgrading VideoJS from v2.0.2 to v4.1.0 and that still did not solve the problem.
Here is the link: http://www.therefinerycreative.com/#!/theatrical
I believe it is the actual source movie files that are the problem. The mp4 file is 15mb which is quite big for a 1 minute movie. I can see the dimension size of the movie is fine. Try decreasing the size of the file down first. Or to save you time first, try putting in the standard video from videojs just to double check that it definitely is the source file(s). http://vjs.zencdn.net/v/oceans.mp4
I also noticed that you use an ogg file too. In most cases you can get away with just using an mp4 file. Try both of these solutions and let me know how you get on.
I'd like to include an entire HTML5 video in one spot and then a portion of the same video lower on the same page. This abbreviated syntax works for the portion of the video from 1:01 to 3:51.
<video>
<source src="foo.mp4#t=61,231" type="video/mp4" width="640" height="360"/>
</video>
But the first video shows up normally and the second, shorter video with the same source doesn't seem to get loaded and appears as a small, black video player. But loading the second, shorter video in a second page works normally.
Is is possible to load the full video and then a portion later on the same page?
Thanks.
This works fine in Linux Firefox 22.0 but has the above-described problems in Linux Chromium 28.0
Ok, I have the same problem, however I am not even trying to start one video at a different time. I am just trying to include two of the same big movie twice on a page. One loads, or the other, but not both. I tried copying the movie and naming it movie2 and include that in the code. That works. Its ugly, so I tried to instead make a symlink rather than copying the movie. This does work:
ln -s movie.mp4 movie2.mp4
So as long as you have your code with two different names, they both load. But on the server side its just one file and a symlink. This is a workaround, so I would like to find out if there is a bug or something. My Chrome is 28.0.1500.95
I guess adding query string - for example ?1 - at the end of the second video src will force browser to download the file again in Chrome
src="foo.mp4?1"
I'm using Video.js to play back videos in MP4 format on a client's website.
The player uses html5 video and Adobe Flash Player as a fallback.
(In my case it seems to use Flash always so I don't know if the problem exists in the native html5 player as well.)
The video only starts playing after the *.mp4 file is completely loaded. So no buffer for a few seconds. The file must be completely downloaded by the browser before it starts playing.
When the video is long, the visitor has to wait very long before he can even see that the video is working.
The question now is, is it the browser, the script (video.js) or the video file that creates that problem.
On the videojs.com website however the video is playing back while loading, so works properly. Therefore I think it can't be the browser.
Has anyone else had that problem? How can I fix this issue?
Any advice is very much appreciated!
Thanks
Max
That occurs because the moov atom of the mp4 file is on the end of the file, the player needs to know the moov atom before start playing, you can move easily the moov atom to the beginning of the file with MP4Box, there is a gui version for Windows.
In Linux command line you move the MA with: MP4Box -add my_video.mp4 my_newVideo.mp4.
This takes a few seconds.
More info:Adobe's explanation of moov atomhere
Are you sure that you have your tag with preload="none" because I was having the same issue and I had preload="auto". I changed it to "none", it worked great!!
My issue had nothing to do with the moov atom because I tried that too and it didn't have any effect. I even removed this converted video and it still worked with preload="none".
kjsharks
I use this command to add the metadata:
MP4Box -isma your-file.mp4
;)
Quoting http://docs.videojs.com/docs/guides/options.html
The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.