I have converted the video into 3 formats such as .mp4, .webm, .gov But still background video is not playing in safari browser
<video autoplay="" muted="" loop="" id="myVideo">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/ogv">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).webm" type="video/webm">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
</video>
page url is http://gnxtsystems.com/cookie-test/
Please help me to fix it. Thanks in advance.
Try these two things..
add playsinline attribute in video tag like this
<video class="video-background" autoplay loop muted playsinline>
and secondly for apple devices you will have to turn off the low power mode.
then check...it will work
It's quite simple if you are using it in React. You just need to enable it to play inline and disable "picture in picture" feature.
<video className="background-video" loop autoPlay playsinline="true" disablePictureInPicture="true">
It might be because of the mime type. Try only mp4 file. And for some reason, videos would not play on iPad unless I set the controls="true" flag.
Example: This worked for me on iPhone but not iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
And this now works on both iPad and iPhone:
<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
you need to use a poster attribute according to standards and must not load the video background on mobile devices. Then a ogv is a webm format so you'll need to use:
<video autoplay="" muted="" loop="" id="myVideo" poster="image.jpg">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/webm">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
</video>
No need to load webm as you'll load ogv and only if it's not possible to load ogv it will load mp4. The poster attribute is used since the video loads and should be used on mobile devices as background without loading the video according to mobile-first design to not waste visitor's data and to get a benefit on load time.
EDIT:
And try to use always names without spaces when working on web:
videos/2.0-Welcome-to-DISTRO_1 (1).ogv
should be:
videos/2.0-Welcome-to-DISTRO_1_1.ogv
Here is a working example that you can inspect:
http://joelbonetr.com/
You can try WEBM formate, hope it helps!
<source src="<?php echo the_sub_field('banner_background_video_webm');?>" type="video/webm">
Related
I am trying to make the video in my website full screen but viewing it on iphone it redirect me to the video, is there a way play the video on same page?
<video poster="poster.jpg" preload autoplay loop>
<source src="vimeo.mp4" type="video/mp4">
To get the best experience of this website please consider updating your web browser
</video>
~
<video <video poster="poster.jpg" preload autoplay loop playsinline>
<source src="vimeo.mp4" type="video/mp4">
To get the best experience of this website please consider updating your web browser
</video>
you can simply add the "playsinline" attribute in the video tag, you may also include "webkit-playsinline"
I have been looking into how to implement HTML5 videos as a
background
video on web and mobile, below is the following code-
it displays but not autostarts, this is the problem
<video width="100%" controls autoplay>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
Depending on your Chrome version you might get the new implementation of video autoplay rules:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Taken from: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So you can try it muted:
<video width="100%" controls autoplay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
I had similar issues with autoplay not having any effect regardless of usage of muted. Unexpectedly I had success when specifying autoplay as camel case autoPlay
In React you need to add the attributes of tags in camelCase. So in this case It has to be autoPlay.
It's too old thread now. But still I have a suggestion if you want to use.
Instead of the autoplay attribute(because other told it's only work always if it also has muted) you could use one thing:-
function playVideo()
{
document.getElementById("vid").play();
}
a very simple function in javascript. Make sure to give your video Id 'vid' or change it here. Video Example
<video id="vid" loop controls>
<source src="Videos/vid.mp4" type="video/mp4">
</video>
and in body tag write this:-
<body onpageshow="playVideo()">
It worked for me. Maybe for you too
Make sure you check browser permissions. If the site is not secure (http), then autoplay on websites will be disabled.
To make changes you can click on the left side of the Address Bar of the browser and click Allow audio and video.
Just change autoplay as camel case autoPlay
<video controls autoPlay loop muted>
<source src={myvideo} type="video/mp4"/>
<source src={myvideo} type="video/ogg"/>
Your browser does not support the video tag.
</video>
Had a similar issue. The fix is to camelCase autoPlay.
So the following should work:
<video autoPlay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
Chrome says "This plugin isn't supported" even though I have both video formats. Strangely I can play HTML5 video on other websites (with the same computer/browser). I looked at the source and they have mp4 first then webm.
I tested the site with chrome from another computer and it works fine. Chrome is at the latest version on both computers.
Here is my code:
<video preload="auto" autoplay loop>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
<video preload="auto" autoplay loop muted>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
Add the muted attribute to the <video> tag.
As you explain your issue...Please check with your 'Chrome extension' in setting, it might be possible that you have any extension which is creating problem in playing the video.
Please try to stop all extensions and then try to run the page again. Hope it will work.
I want to play .mov video like as this, but video doesn't play in any browser.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mov">
</video>
You can use below code:
<video width="400" controls autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
this code will help you.
Instead of using <source> tag, use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="mov1.mov"></video>
or
you can give multiple tags within the tag, each with a different video source. The browser will automatically go through the list and pick the first one it’s able to play. For example:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
If you test that code in Chrome, you’ll get the H.264 video. Run it in Firefox, though, and you’ll see the Ogg video in the same place.
Unfortunately .mov files are not supported with html5 video playback. You can see what filetypes are supported here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
If you need to be able to play these formats with your html5 video player, you'll need to first convert your videofile--perhaps with something like this:
https://www.npmjs.com/package/html5-media-converter
Content Type for MOV videos are video/quicktime in my case. Adding type="video/mp4" to MOV video file solved issue in my case.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
in the video source change the type to "video/quicktime"
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/quicktime">
</video>
You can use Controls attribute
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
My new answer is to use ffmpeg to transcode the .mov like ffmpeg -i sourceFile.mov destinationFile.mp4. Do same for the webm format.
OLD Answer:
Here's what you do:
Upload your video to Youtube.
Install the "Complete YouTube Saver" plugin for Firefox
Using the plugin in Firefox, download both the MP4 and WEBM formats and place them on your Web server
Add the HTML5 Video element to your webpage per MDN's recommendation
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
Style the <video> element with CSS to suit your needs. For example Materializecss has a simple helper class to render the video nicely across device types.
I have the different video files in the HTML <video> tag like so :
<video autoplay="" id="video" preload="auto" style="display: inline-block;">
<source src="../register.mp4" type="video/mp4">
<source src="../register.webm" type="video/webm">
<source src="../register.ogv" type="video/ogg">
</video>
But for some reason, in chrome it doesn't work. It only works if I get rid of the MP4 source, but then it doesn't work in IE... not sure what's going on here or the best way to approach this.
I have already gotten passed the step of creating video files for all browsers as suggested in this question, but it has not solved my issue.
The order in which you list the sources matters. In Chrome, once the .MP4 video fails to load, the other sources don't even bother trying to load, so just by putting the .MP4 source as the last source element it fixed everything.
<video autoplay="" id="video" preload="auto" style="display: inline-block;">
<source src="../register.webm" type="video/webm">
<source src="../register.ogv" type="video/ogg">
<source src="../register.mp4" type="video/mp4">
</video>