In mobile mp4 video is not working? - html

In mobile mp4 video not working, it display only img of video.
I don't know how this problem solve.Link is here
http://innovatoryinfotech.com/theme/Restora/index-video.html
This is my html.
<video id="video" class="slider-video" width="100%" preload="auto" loop autoplay style="visibility: visible; width: 100%;">
<source src="video/Sushi-361.mp4">
<source src="video/Sushi-361.webm" type="video/webm">
<source src="video/Sushi-361.ogv" type="video/ogg">
</video>
Please solve this problem.
i add this script
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
then it work when click in the img then video is start.
But how to start automatic video on mobile.

It's not "not working", it's just preload and autoplay disabled. In iOS Safari, you can't make video play until user explicitly start it.
Here is the official document description:
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.
UPDATE: according to https://developers.google.com/web/updates/2016/07/autoplay, autoplay was disabled in some versions of Chrome on Android too. However, "muted autoplay" is supported by Chrome for Android as of version 53, and is supported by Safari on iOS 10 and later.
Thus, you can try to fix this issue by adding muted attribute (<video autoplay muted>). However, due to browser history, it won't work on all devices.

Related

Impossible to play my video on Safari browser

I looking for a way to play my video on Safari but I don't understand my video doesn't start ?
However, my video works on google chrome or edge.
Here is an idea of my code HTML
<video width="640" height="360" controls="true" autoplay loop muted playsinline>
<source src="/Perso/WebSite.nsf/vLUpage/VIDEOS/$File/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Perhaps that, I have to use of the CSS ?
Thank you for your help.
Try disabling cross-site tracking prevention on you IOS device under Safari > Preferences > Privacy.
read this https://support.apple.com/en-gb/guide/safari/sfri40732/mac
You can't play automatically a video on safari. The user has to engage an event and in this event you can play your video.

Why does HTML Video tag not work on ios devices?

I'm trying to make a webpage with a video. It works fine on desktop and android devices but it does not work on ios devices. I have tried to add playsinline, remove autoplay and change the file format (from mp4 to mov) without any success.
my code:
<video loop muted playsinline controls class="video-background" style="
position: relative;
width: 100%;
height: auto;">
<source src="{% static 'somesrc.mp4' %}" type="video/mp4">
</video>
Help is appreciated
As of iOS 6.1, it is no longer possible to auto-play videos on the iPad. According to Apple documentation Autoplay feature is not working on Safari in all ios devices including iPad:
"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.
In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it."
<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
You must use controls = "true" in your opening tag of video and this worked for me . Hope it will show good results

HTML5 video webOS

I'm trying to play an external HTML5 video within a webOS web application. According to this question, webOS should support .mp4 video, but whenever I try to play a HTML5 video within my application, the video simply won't load/play. My code (for testing purposes):
<video id="demo-video" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4"
type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I've tried different sources, but none of them seem to work. When testing in a browser, it does work, but when opening the application on a webOS Smart TV, nothing happens. Even trying to play a local .mp4 file doesn't work.
I found out that .play() on the video element returns a Promise with status pending. Strange behaviour and reloading the source doesn't fix the problem.
I found the problem: it had something to do with the styling I applied on the <video> element. When developing, Chrome showed the video just fine. But apparently, border-radius is not allowed? At least not in the version of Chrome used on the Smart TV and emulator. So if you're experiencing the same problem, check for styling that may cause the video not to play.
Try adding width and height attributes to your video tag. The video works on my TV.
<video id="demo-video" width="1920" height="1080" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>

HTML5 video I want autoplay & muted until sound is initiated, but is permanently muted on iPhone Mobile

I have an HTML5 video embeded in a portfolio I want to autoplay & be muted until sound is initiated, so when a user is scrolling down the page it's already playing but there isn't annoying sound for the user. It is working fine on all browsers on my desktop and tablet, however on iPhone mobile the sound is permanently muted, even when a user tries to adjust the volume. Here here's the code I am using, is there some javascript I can implement/use instead that will solve this?
<video id="cla-generic" preload="auto" onclick="this.paused?this.play():this.pause()" autoplay controls muted loop>
<source src="video.mp4"/>
</video>
Autoplay does not work on iOS and android.
Thats why you are getting no sound.
Take a look at this thread:
iPhone HTML5 Audio tag not working

Latest IOS10 Autoplay Enable

Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.