I embed the js through cdn.
my img source and video source all load from romote disk,the img can't scale to the player size.
when I click the play button,but can't play the video.
my website linkļ¼
http://www.zeguoren.com/thread-6463-1-1.html
According to W3C HTML5 specifications:
The image given by the poster attribute, the poster frame, is intended
to be a representative frame of the video (typically one of the first
non-blank frames) that gives the user an idea of what the video is
like.
So you should use an image for the poster attribute that fit to the size of video.
If you want to see poster img, you also have to set preload attribute to 'none' or 'metadata' (see here).
About video, Internet Explorer 9 support only .mp4 format. So you should add a source:
<video data-setup="{}" poster="http://img142.poco.cn/[...]2043.jpg"
preload="none" class="vjs-tech" id="my_video_1" tabindex="0">
<source type="video/mp4" src="http://storage.live.com/items/F[...]2B!290?a.mp4"></source>
<source type="video/webm" src="http://storage.live.com/items/F[...]2B!290?a.webm"></source>
</video>
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 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
I have some videos I try to convert with Blender into a format which could be rendered by the most modern Browsers. I tried many different Settings and neither IE nor Firefox was able to decode the files. (Windows Media Player always did.)
I use the following html code:
<video width="320" height="240" controls>
<source src="data/test.avi">
Your browser does not support the video tag.
</video>
Is this correct?
I tried different formats, codecs and reslolutions. (mpeg-4, h.264, ogg, theora).
Do you have any suggestions?
Edit:
Ogg-Theora does run in Firefox and Chrome, but not in IE.
This is and has always been an issue, that is, format "wars" - which format to use, both for audio and video.
Unfortunately (depending on what angle you look at it) there is not one single format to rule them all, so you actually have to provide as many as "possible". By possible at least the three main formats:
MP4
Ogg Video
WebM
You can choose priority by defining the source tag in the order you prefer them to be used:
<video width="320" height="240" controls>
<source src="data/test.mp4" type="video/mpeg" />
<source src="data/test.ogv" type="video/ogg" />
<source src="data/test.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Hope this gives some input.
I am getting from a service some links to *.mov videos, but their url has query string parameters and I don't know if this is the reason but I am not able to embed them on the page.
This is a source of one of them for example:
http://cache1.asset-cache.net/xd/457430254.mov?v=1&c=IWSAsset&k=2&d=2549FB43098C7F200F7C309C560BA2808EED8012893D117345EEB6BCEF0E7040&b=RQ==
I did try to remove the parameters but then the video doesn't work.
Please see this fiddle which contains this code:
<div>This works:</div>
<video autoplay src="http://www.kin.ucalgary.ca/courses/knes381/sample.mov">
</video>
<div>This doesn't work:</div>
<video autoplay src="http://cache1.asset-cache.net/xd/457430254.mov?v=1&c=IWSAsset&k=2&d=2549FB43098C7F200F7C309C560BA2808EED8012893D117345EEB6BCEF0E7040&b=RQ==">
</video>
Why can't I embed them on the page?
Thanks!
You should know that HTML5 <video> element has a limited number of supported video format, for more infos take a look here : Media formats supported by the HTML audio and video elements. So for your first video, It's has the MPEG-4 AVC (or H264) video format with AAC as audio format and It's supported by HTML5 video tag. On the other side, the second video has as video format the Sorenson 3 and ADPCMas audio format, so it's not supported by HTML5 video element.
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