I want to abandon the HTML5 video tag for a 8MB MP4 file I want to play on a webpage because it has been doing strange things on Chrome on Windows 7/8 but not on Chrome <=Vista. Strange as in:
Not loading it sometimes
Most of the time but not always vertically squashing the video content 70%
Flickering wildly
This has been duplicated on a number of different machines we have tested on.
Is there some markup I could use to force an MP4 to be played by Flash only?
TIA
Mark
You can make the player use Flash using the techOrder parameter.
<video ... data-setup='{"techOrder": ["flash"]}' ... />
https://github.com/videojs/video.js/blob/master/docs/guides/tech.md
If you want to give the priprity to flash player first go to the video.js or video.min.js file and replace the ["HTML5"],["flash"] with ["flash"],["HTML5"]
Try to replace
vjs.options = {
// Default order of fallback technology
'techOrder': ['html5','flash'],
with
vjs.options = {
// Default order of fallback technology
'techOrder': ['flash','html5'],
in video.js. The script will now give flash the priority to run, rather then html5
Related
I'm currently rendering a list of HTML5 video elements.
I have multiple video files on a single page, i do not want to download a lot of data until the user clicks play.
I would like to grab frame 1 and show it as the poster. I dont have access to an alternative posters for each video.
I'm looking at the preload attribute with a value of 'metadata' for the video element here:
http://www.w3schools.com/tags/att_video_preload.asp
This looks to have limited browser support.
Using preload='metadata' works in firefox and chrome and show frame 1 as a poster.
Using preload='metadata' disables preloading in safari, but disabled the poster.
I have been unable to test in IE.
How do i show the HTML5 video elements frame 1 as a poster, in safari, without preloading a large chunk of data.
<video controls preload='metadata'>
<source src="{{video.url | trusted}}" type="video/mp4">
Your browser does not support the video tag.
</video>
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday - so not yet available)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.
I want to display ads with VAST ad tag and with a HTML5 player. I'm currently trying to use videoJS with Vast Ads Plugin and I'm noticing I can't get the videoJS player to work without having a video content (video element with a src attribute for the video content).
Does anyone know a simple way to use a video player for just ads from VAST, and without video content? Google IMA3 SDK allows that, but I'm now looking for video plugins to cover IE use case (which Google IMA3 SDK does not cover).
Thank you!
There is a dirty way to do this. You can get the ad video url from the plugin that already parsed by it. Then just paste as src to video tag.
If the player you are using support only running pre-roll, that's obviously the best choice. Since that's likely not the case, I would recommend creating a small 1 second long black video MP4 and setting it as the content, with all video controls disabled. This was the lowest friction solution for me, as I didn't need to ask the player anything special of the player. The pre-roll plays, and the user briefly sees black at the end, which may not really be noticed.
I have a problem on a website.
When I reach this url http://www.diamir.com/en/product/diamir-vipec-12/, on page load, videos are not loading correctly. When I click on the play button, video remain black and only after a while become clear. It's really a strange behavior. I don't know if it is an issue with the codec or something else.
The website is optimized using PageSpeed Service from Google.
Codec: AVC (Baseline#L1.3)
Here is the HTML source:
<video controls class="img-responsive">
<source src="http://a3.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_x264.mp4" type="video/mp4">
<source src="http://a1.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_VP8.webm" type="video/webm">
</video>
Someone has had the same issue?
There are a couple of things you need to fix/take into account:
your videos play well in Chrome but IE displays an error message and firefox just won't read them.
your mp4 has the MOOV box after the MDAT box which means your mp4s are not prepared for web delivery. This issue is described here
Suggestions to fix it:
use Handbrake, ffmpeg or MP4Box to prepare your MP4 files for web delivery (aka faststart)
use the preload attritube set to "auto" in your HTML5 video tag for faster playback on click after page load (if you do that do not load too many videos on the same page or your end user will suffer network congestion)
set width an height for your HTML5 video tag otherwise it will scale to the resolution of the video file. You may want to keep control on that especially for responsive design.
Your videos have no audio track. That should not be a problem for HTML5 video playback but keep that mind if needs be. I have seen cases where you need to add a silent audio track to make it work on all devices (especially for exotic fallback from HTML5 video).
You can read there for more infos on HTML5 video. I suggest you double check the section called "MIME Types Rear Their Ugly Head" as well.
I'm setting up video.js and would like to use a single video encoding format (H264) in order to save space (it would save over 50% in my case). video.js falls back to a flash player when HTML5 video isn't possible, but I'd like it to also fall back when H264 support isn't present too (in Firefox, for example). Is there some way to make this happen?
You could try detecting support for that format directly if you needed to - although I agree, it should fallback to Flash automatically.
http://diveintohtml5.info/detect.html#video-formats gives an example of detecting support for h264
You don't need to do anything. That is what will happen.
It works here, for example. Do you have a URL where it's not working for you?
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.