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"
Related
All is in the title. When i access a page with a video tag, autoplay works fine.But when i reload the page, the video dont start.
What can i do to auto start the video ?
<video autoplay loop poster="the_poster.jpg" id="bgvid">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
i try to add a ?ts=timestamp.
i try also to start the video with JS but i get a "promise error"
I've had same issue here and it solved by adding muted attribute to video tag.
For Google Chrome, according to this update note, autoplay with sound needs some conditions. However, Muted autoplay is always allowed.
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>
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">
I've stumbled upon this problem, while coding my project.
I have this html that plays a video:
<video id="video" autoplay="autoplay">
<source src="/videos/sample.mp4" type="video/mp4"></source>
</video>
Unfortuanately it is not starting the video.
However if i set the source of the video to be taken from the web (e.x.) http://techslides.com/demos/sample-videos/small.mp4
It plays the video correctly. Does anybody know what could be a trouble in here.
Try this
<video width="720" controls autoplay loop>
<source src="sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
I am trying to load this in a video tag but it is not loading. If I go to the link directly on my iPhone or android phone it will play without problems.
<video width="400" controls>
<source src="http://vod.ak.hls.ttvnw.net/v1/AUTH_system/vods_2f44/asiagodtonegg3be0_17169379616_331512496/high/highlight-22030149-muted-Y56G7SNUCG.m3u8" type="video/mp4">
Your browser does not support HTML5 video.
</video>
The correct type is application/x-mpegURL or vnd.apple.mpegURL