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.
Related
I am having issue with this code:
import myTitle from "../../image/earth.mov";
function Hero() {
return (
<div className="section-hero">
<video autoPlay loop muted>
<source src={ofobTitle} type="video/mov" />
</video>
</div>
);
}
export default Hero;
It will not show / load the desired video. When I test the same code using mp4 the video works perfectly.
My issue is that I cannot allow for the video to be converted to mp4 as I need to retain the alpha channels.
Does anyone know a way around this problem?
Your .mov file likely is using H.265/HEVC encoding, which is only supported by Safari browser. You'll need to convert it to a web compatible format like WebM (which has alpha channel).
Check out https://blog.gskinner.com/archives/2021/10/alpha-video-in-html5.html for details.
Video.js supports mp4, wemb and ogg formats but i think there is a trick to add flv format example: http ://jsfiddle.net/N8Zs5/18/
That link is just an example of forcing the Flash fallback to be the initial tech tried. You can do that by passing in "techOrder": ["flash", "html5"] to the data-setup attribute on a video element.
However, that shouldn't be necessary for just playing back an FLV. As long as you include the type attribute with the source (video/flv), then Video.js should automatically use the Flash fallback for that source.
That being said, I would encourage you to try and use HTML5-friendly formats such as H.264 or WebM. :)
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 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>
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