Impossible to play my video on Safari browser - html

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.

Related

HTML Video Not Playing Audio

I am trying to play an mp4 file I have stored locally on my computer (when I play it with quicktime it works perfectly). For some reason however I can't get it to work with sound. If I include the 'muted' keyword, the mp4 plays, however with no sound (makes sense). However if I remove the 'muted' keyword, it doesn't play at all.
Any ideas what I am doing wrong?
Here is my code:
<video id="introVideo" width="50%" height="100%" autoplay loop muted>
<source src="../static/myvideo.mp4" type="video/mp4">
</video>
Did you tried with another web browser? Because autoplay is not allowed and even more on sounds with Chrome
This may be a little late, but starting in Chrome 66 autoplay doesn't work unless the muted attribute is included.
So in Chrome you can autoplay a muted video or autoplay won't work.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay
Edit:
https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html
Search for 'autoplay' in the chromium blog link.

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>

Video not autoplaying when i use poster image

I have a simple problem.
I want to use an image until the video downloads to cache. And after video download is finished, the video must autoplay. So, I used "poster" attribute for image. But now video autoplay is not working.
<video width="100%" height="100%" autoplay loop poster="img/loading.gif">
<source src="img/myvideo.mp4" type="video/mp4">
</video>
I don't want to use "controls" attribute. How can I solve this problem?
Could potentiality be this Google chrome disables autoplay
Chrome and i believe Firefox have disabled autoplay on websites. Users have to allow video's to be autoplayed.

In mobile mp4 video is not working?

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.

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.