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.
Related
I really only need this for a video, I'm using the video component https://github.com/yamill/react-native-videoplayer and I want to use a local asset video rather than an mp4 stored on the web, how would I locate the video? e.g. http://local/my-asset/video.mp4 (This is obviously made up for demo purposes).
I'd recommend switching to react-native-video. It has better support
https://github.com/react-native-community/react-native-video
Then, the video component's source can be passed as follows:
<Video source={{uri: "http://local/my-asset/video.mp4"}
...
</Video>
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.
I've been attempting to find a method for playing video inline in mobile safari for awhile now.
I know this is possible and has been achieved (see link)-
http://www.raptmedia.com/project/philips-designed-play-drives-mobile-video-engagement
However, I am unable to determine how this is done. I've tried manipulating iframes but this alone doesn't seem to have any impact.
I've included a js player for cross browser compatibility and used it within an iframe, no luck in mobile:
<div class="vid"> <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="600px" height="600px">
<source src="video.mp4" type='video/mp4'/> <source src="video.webm" type='video/webm'/>
<source src="video.ogg" type='video/ogg'/> <track kind="captions" srclang="en" label="English" />
</video> <script> var myPlayer = _V_("vid01"); ` </script>` </div>
I know this is an old question, but it ranks high in my Google search and I can at least answer the question posed above, so I'll add this in case other people come across it: why does it work on that particular page?
I looked at it, and it doesn't really play inline video. On my iPhone, it preloads a ton of JPG frames and then "plays" them like a movie, while playing an mp3 audio track behind it. So they are just faking it, basically. Still not able to play the video inline on the phone.
The only solution I know is based on the drawImage function of the canvas tag... I spotted the basics here on SO but there's some fun left for the reader :D, in a few words, You hide and play the video and at the right freq You render the current frame into a canvas, some attention is needed for the audio sync. It works better than expected.
Here is a basic sample, and here another one where I try to apply some webkit based filters.
Hope it helps, have fun!
You can use something like this library to make it work: https://github.com/bfred-it/iphone-inline-video
It basically uses an audio tag to drive the video by seeking to the current time, so you can have the frames updated without having to play the video.
The good news is that iOS 10 will support this, so no more hacks are going to be needed: https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12
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>
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