I have a page with 10 videos. They are loaded in colorbox lightboxes.
I am using the standard videoJS markup.
Loading videos via:
View</li>
and:
<div id="5ways" style="height: 348px">
<video id="5ways" class="video-js vjs-default-skin" controls
preload="auto" width="618" height="348"
data-setup="{}">
<source src="//contiki-downloads.s3.amazonaws.com/agent/training-tools/video/5ways_converted.mp4" type="video/mp4">
<source src="//contiki-downloads.s3.amazonaws.com/agent/training-tools/video/5ways_converted.WebM" type="video/webm">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
The bottom-most 3 videos (where they are positioned in the HTML) won't load. Videos 8, 9, 10 just get the loading spinner.
There's nothing wrong with the markup/paths to the videos. I have tested the URLs and they work fine. I have also tested commenting out some of the other video tags, which causes the broken videos to start working.
EG. If I comment out video 1, video 8 starts working.
Comment out video 2, video 9 starts working.
Comment out video 3, video 10 starts working.
The same is true for whatever order I do this in.
VideoJS will only allow 7 videos max to be embedded.
Anyone got any ideas? Or links to pages where more than 7 videos have successfully been embedded?
As I said over in the video.js issue tracker, it looks like you're hitting Chrome's max connections per domain. As well as not using preload="auto" you might try suggestions in this question, such as spreading the videos over different domains. You may be able to set up multiple cnames for your s3 bucket.
Increasing Google Chrome's max-connections-per-server limit to more than 6
Related
I am trying to use videogular2 and I have simply replaced the static video content link with a shareable link from Google drive that points to an MP4 video file.
<vg-player>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source src="https://drive.google.com/open?id=xyz" type="video/mp4">
</video>
</vg-player>
Under Chrome browser the video player shows a resistance icon at the center and cannot play anything as it can be seen at the following screenshot:
Under Internet Explorer the video player shows the text "Invalid source" and the play button on the left as it can be seen on the next image:
But if I use the sample URL: http://static.videogular.com/assets/videos/videogular.mp4
it works very well.
I would appreciate any ideas/pointers related to what I am doing wrong.
I had the same problem and solve it using an address like the following:
https://drive.google.com/uc?id=ID_OF_YOUR_VIDEO&export=download&authuser=0
thank you for reminding me this. I found the answer long time a go but I haven't updated SO. I will accept your answer of course.
In order to view a Google video from my application (not necessarily using the Videogular plugin) I used an iframe:
<iframe src="https://drive.google.com/file/d/ *** VIDEO ID *** /preview?pli=1" frameborder="0" target="_parent">
</iframe>
If you want to start the video from a specific time and not from start add this parameter at the video url:
&t=10
where 10 is the start time in seconds. In this case the video will start playing from the 10th second.
I am using a video background for my website. Which runs fine on all browser on local host. But when I upload it to ipage server, it does not run on IE11. Here is my code.
<video autoplay loop muted class="visible-lg visible-md">
<source src="video/sh.mp4" type='video/mp4" codecs="avc1.4D401E, mp4a.40.2"'>
<source src="video/shanonaction.ogv" type="video/ogg">
</video>
First check your IE version. If it is lower than 9, you need to use the Flash player. You can also used embed in Internet Explorer 8 or lower.
Like this:
<pre>
<video id="Video1" controls width="100%" height="auto" poster="pic.png">
<source src="video.mp4" type='video/mp4;' />
<embed src="video.mp4" wmode="opaque">
<param name="wmode" value="opaque" />
</embed>
</video>
</pre>
It works for me.
This took me a really long time to figure out. No one seemed to know.
The issue is the pixel size of the video.
For some odd reason. Internet Explorer 11 will simply ignore any video whose height is more than around 1000 pixels. so a 1080p html 5 video will not load, but a 720p will.
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 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.
Trying to get good html5 video on my site. here are the issues and observation, observed locally:
IN Firefox
1. when you pass the mouse over the video, video stutters, audio continues
2. the first video plays the best but not as well as in chrome
3. The 2 other videos don't play well, audio runs but video stutter/stops
In Chrome
1. Poster image visible on video 1, not visible on videos 2 and 3 - u just see the controls
2. video plays well, when you pass the mouse over the video, no stutter...pause and play works well
on all 3 videos...
Perhaps the ogg format is not as smooth as mp4 ? Also, I'm not clear on changes in code required when running more than 1 video on a page. I did add an id, but there is no corresponding css so I'm just not clear on that...
Here is the code I am using:
<video id="vid2" video controls= "controls" preload="metadata" width="640" height="360" poster="video-blog/clarkekoiblog-greenhouse.jpg" tabindex="0">
<source src="video-blog/clarkekoiblog-greenhouse.mp4" type="video/mp4"><!--for chrome,safari-->
<source src="video-blog/clarkekoiblog-greenhouse.ogv" type="video/ogg"><!--for firefox-->
<source src="video-blog/clarkekoiblog-greenhouse.webmvp8.webm" type="video/webm">
<p><em> If you do not see a video here, please refer to the info at the bottom of the page</em></p>
</video>
Looking for comments, a solution whatever to make this work.
THANK YOU