I have used video.js for several videos on two previous projects. The projects were cross browser and work fine.
On project 3 I set up the video reference in a floating div like so...
I get the following error from Firefox on loading the page into the browser...
Media resource tio4.mp4 could not be decoded. tio4.php
All candidate resources failed to load. Media load paused.
I attempt to play the video subsequently with...
videojs("example_video_1").play();
but (of course) it does not play.
Swapping tio4.mp4 with a video from a previous project I have no problems.
Running tio4.mp4 (The video that gives the "could not be coded" error) in Movie Maker shows the video running fine.
Do I need a refinement in my video reference? What else?
The original video (The one giving me the problems) was formatted in an obscure tool.
I put it in Movie Maker and tried saving it which made no difference. I then cut a tiny piece off the Movie and saved it as a "clip" which worked on this one and a subsequent one!
Related
I have a single page website on which I would like to host up to 14 videos using the html5 video player. The video files are all between 80 and 150mbs and I'm currently hosting them on AWS S3.
I'm running into a problem, however, which is that the players do not load well. Once I click play, they take often 10 seconds to start playing. Because of this, I tried turning on the preload function (i.e. preload="auto"), but this led to other problems. Because there are so many players on the page, some of the players stall -- I think because when a browser tries to download too many at once, some will stall.
In order to mitigate that problem, I setup a queue to preload the videos three at a time. That works, but now I've run into another problem: Chrome, at least, stalls giving a message "waiting for available socket...." I know from this that that is probably due to a limit on the maximum six websockets that can be open at once.
So now I'm truly stumped. I'm not sure how to guarantee that the videos start playing in a reasonable time (1-3 seconds) after the user hits play, and not max out the browser's limits. I'm starting to wonder if this just can't be accomplished given the limits of the html5 video player.
If anyone has any ideas about workaround, or ways in which approach could be altered it would be much appreciated.
So instead of turning preloading on, I would suggest you set preload to none
e.g:
<video id="myVideo" preload="none">
Think of it this way - if you set 14 fairly large videos to all download at once, so they are available immediately for the user wants them, you'll end up with no one video actually fully loaded.
If you set them to not download at all until the user requests one (i.e. clicks the play button) then there may still be a small delay. However they'll end up downloading less overall, they'll only download the videos they actually watch and the page is much less likely to crash. This is much more considerate to the user too (think those on low bandwidth/throttled connections).
However, not all browsers respect the preload="none" option and may preload parts of the video anyway. The safest possible, but more complicated way would be to put placeholder images with fake play buttons on them, which on user click dynamically inserts a video tag to the DOM. That way you can be sure no video tag is ever loaded until it is requested.
I am creating all in one music app using multiple APIs. I want to stream only audio of youtube song. As i searched a lot but could not find actual solution. many of them says it will be against Youtube TOS. If it is so than how "StreamUs" chrome extension is working. I am not creating something this but i want to stream a song audio only as it is in above extension.
Thanks in advance.
author of Streamus here. Just dropping in to give a definitive answer.
Chrome extensions can utilize both an invisible, permanent background page as well as a visible, temporary foreground page. When the foreground page loses focus - it is destroyed and all content is unloaded from memory.
Streamus hosts the YouTube video player on the background page which gives the illusion that the video is not loaded. It pipes all commands from the foreground UI to the background page.
However, it's worth noting that this is a violation of YouTube's Terms of Service. I've been working with YouTube to figure out a good solution to the problem and am almost there with a clever way to present video in the foreground without losing the audio. :)
Unfortunately it does pull the video as well for bandwidth, but good question.
as quoted by the author in
https://www.reddit.com/r/streamus/comments/1w64wj/question/ .
First, some background information. I am running a prototype site with the standard XAMPP configuration.
The problem I am having is this. When I load multiple audio tags to a single page, I don't come across an issue until I load the same song more than once.
When this happens, any reference below the first can't be loaded/played until the first one is at least played, then paused.
Also, if you try to play them both, only the first one to be triggered will play (not as big of an issue). Here is a screenshot of the issue:
update: It seems that when playing one of the duplicate songs, it will randomly stop and the other duplicate will start playing.
update 2: I have checked multiple sites and haven't found a solution to this problem. May be an issue with how the browsers play the files.
I have the page http://video-stock.co.uk setup with 4 videos, all using video.js. It works fine with chrome etc which use the html5 implementation, but when I view in ie7/8 and the flash fallback, the big video and the first of the small videos are fine, but the other 2 small videos are black, and have no play button overlay, and are unresponsive to clicking, although a right-click does bring up the flash context menu.
I have next to no knowledge of working with flash to play videos, except the odd embed in Wordpress, and I was glad to find Video.js to sort all that out for me. All I can see in the code is that the correct video files seem to be getting sent into flash, but maybe it is because the flash player (.swf) file is being called more than once? Just a novice guess. Any help gratefully received.
Edit, for completeness I set up a test for flash on the page in chrome etc - if you go to http://video-stock.co.uk/?flashdefault you can view the page with all players in flash. It works fine on chrome, ff and even IE7+8. To get the flash default I have used:
_V_.options.techOrder = ["flash", html5, "links"];
I will change the default to that order if I receive no replies from you helpful lot.
After the edit I went to the site in IE without the flashdefault query var and all four players were working.
The only thing I changed was adding preload="auto" to the small videos, and that seems to have been the fix. Although it could have been getting the flash videos into the cache using the flashdefault that fixed it, until some new videos are added we won't find out. To Moderators, should I accept this answer now or wait till I know for sure?
We are developing a Javascript web app for the Ipad that requires sounds to be preloaded before it loads. We don't know what sounds the user needs until they click on an exercise and then they need multiple sounds to be preloaded before the exercise starts.
I am aware there is no preload method, and that the download needs to be bound to a direct tap / click event. We have spent a considerable amount of time trying many combinations of adding media elements dynamically on every click (loaded with dummy sounds) and then trying to swap them with the mp3's we need at the time.
We have given up on that approach and thought we could just join the sounds into one file and move the play head to the desired ranges (contained in a JSON file). We got this working successfully on the desktop but we can't do it on the Ipad because we don't know when the sound is completely downloaded.
Even after the user initiates the sound to be played, the device has no method for checking when the sound is fully downloaded. In fact, it doesn't download the whole file unless it is playing. What we have discovered is that we can not consistently get the duration unless the play head has reached the end in a linear fashion. We have tried to check the buffered.start() and buffered.end() properties against our own duration (we have the JSON file with all the times) but as soon as we try and set audioElement.currentTime and stopTime, it just plays the whole sound from beginning to end.
We have found that the seekable property to be unreliable as well.
We are now working with ios5 and I believe that older versions work differently in regards to the duration property.
Has anyone been able to get this working?