I've noticed that with the recent update to iOS 14.4.2, all of my autoplay video stopped autoplaying. Everything worked just fine on the previous version. This goes for HTML 5 videos, as well as vimeo embeds with their player.js. I've checked other websites using HTML 5, which used to previously work, and all of their videos stopped autoplaying.
With HTML, I'm using the code below to autoplay:
<video autoplay="" muted="" loop="" playsinline="" id="hosting-video">
<source src="LINK" type="video/mp4">
</video>
For Vimeo, I'm using this code:
<iframe src="LINK?background=1&autoplay=1&loop=1&byline=0&title=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allow="autoplay" muted="muted" data-ready="true"></iframe>
I couldn't find anything on this online. Is anyone else experiecing this on iOS 14.4.2? If so, is there anything I can do to play video automatically?
If anyone's wondering, the videos work just fine. Apparently, enabling battery saver on iphone disables autoplay videos.
Try replacing autoplay and playsInline with below code :
autoPlay='autoplay' playsInline='playsinline'
Hope, it works for you.
Related
I have a Rails 5.2.2 app that displays a short video sequence with autoplay. The sound track has been removed from the video.
<body>
<div>
<header>
<video autoplay loop muted playsinline>
<source src="/assets/.../my_video.mp4" type="video/mp4">
</video>
</header>
</div>
</body>
The video autoplays nicely from Chrome, Firefox and Safari on mobile. But in MacOS Safari browsers it does not.
This previously accepted answer suggests that muting this video should be enough, but it seems not to be in my case. A middleware change has also been suggested, but the answer is 6 years old and is labeled as prove-of-concept only.
Changing the above video tag to:
<video autoplay loop muted playsinline poster="/assets/.../my_video.mp4">
...
</video>
seems to fix the problem, but I am having a hard time understanding why, and understanding if I really did solve the problem. I don't understand which of the two references that actually makes the video play. Could anyone explain?
Your original HTML5 looks fine and the test video below is tested and auto playing in MacOS 11.1 and safari 14.0.2.
<body>
<div>
<header>
<video autoplay loop muted playsinline>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4
" type="video/mp4">
</video>
</header>
</div>
</body>
The autoplay rules can change over time so it is worth checking you have a recent version of both the OS and Safari.
If your video still fails to autoplay then it may be some issue with the video itself, or if your framework is generating the code with the final generated HTML5 code. If the problem persists, it would be worth adding the final browser source for the video div if possible.
I have a site that uses a video with the following code:
<video class="hero-video-actual" autoplay loop muted playsinline>
<source src="/content/video.mp4" type="video/mp4">
</video>
I need the video to autoplay on iOS. It autoplays just fine on Android and desktop, but not iOS. I'm not sure why. Everything I see online says that if you use the playsinline attribute, you should be good. But it's not working for me, and I know of no way to inspect the browser console in iOS.
You need to edit your Code like this:
<video
class="hero-video-actual"
autoplay
loop
muted
playsinline
src="/content/video.mp4"
type="video/mp4">
</video>
the "src-path" dont need a own tag, you should include it in the <video> tag
We experience an issue with playing a mp4 file on ipad on webpage with a video HTML 5 player.
Issue:
It does not work on ipad/iphone. On all other platforms (Windows,Android, iOS desktop) it works fine.
This is the code:
<video id="my-video" width="400" height="240" preload="true" controls >
<source src="/media/video/6d9ab49-9936-4194-acvb-3cd9b60521fg/myvideo.mp4" />
</video>
Connected the ipad to the Mac to debug:
A message 'requested resource cannot be found'.
Does sound very clear but does not make sense because the mp4 file is accessible when you paste the url into the browser address bar.
Already tested and checked:
set src of mp4 to fullpath (including https:// or http://) instead of
using the virtual path ;
checked hostingprovider for 'Accept-Ranges: bytes' (with partial content (206) responses) ; settings are ok
play the same mp4 file from a remote url (accessed with or without https); strange but imporant : that works !
So I guess the issue really is that the mp4 can not be found or loaded on ipad.
But why?
Hope someone can help.
Have you tried it like this, include src directly inside <video> tag?
<video id="my-video" src="/media/video/6d9ab49-9936-4194-acvb-3cd9b60521fg/myvideo.mp4" width="400" height="240" preload="true" controls></video>
If it still doesn't work try to use only video element with src, remove preload and controls. Just to see if you can get it to work. And if still no results, try to go for absolute src path.
I had this very same problem serving videos on my Liferay Portal, which works perfectly on PC and Android, but not on iOS devices. After numerous tests, I think I've finally managed to nail down the cause.
For some reason, if the video file (eg MP4) is accessible by a guest user (ie accessible without having to log on to the server), then it will work fine on iOS. However, if the file is only accessible to logged on users, it won't work.
My theory on why this happens is that iOS is probably using a different session to do the range request check than the one used to play the video file. Thus, the range request check fails because the file is inaccessible.
My meteor / cordova app downloads videos to play them offline.
Downloading works fine. Android works fine ... But iOS not..
I tried local absolute URLs: file:///... but I'm getting Not allowed to load local resource Error so I use cordova-httpd as on Android, but this also not works, without any errors (http://127.0.0.1:8880/ oder http://192.168.2.100:8880). If I open the URL in Browser or curl I can view/download the video, so the httpd server seems to work. I tried on real iPhone and in iOS Simulator.
Playing video direct from remote/internet works.
I tried this HTML snippets:
<div class="video-container">
<video src="{{video_url}}" type="video/mp4" width="100%" controls="controls">
</video>
<button class="ion-play play-button"></button>
</div>
and
<div class="video-container">
<video width="100%" controls="controls">
<source src="{{video_url}}" type="video/mp4" />
</video>
<button class="ion-play play-button"></button>
</div>
In the last days I read so much issues on github and comments on stackoverflow, but I cant get it to work.
(btw. the video is also triggered with button click)
Template.Content.events({
"click .play-button": function (event) {
// Prevent default browser form submit
event.preventDefault();
event.target.classList.add('playing');
var video = event.target.parentNode.getElementsByTagName('video')[0];
video.load();
video.play();
}
});
Please, any suggestions?
I found the issue. My url had a double slash (http://192.168.0.100:8880//videos/some.mp4) and on iOS the HTTP-Server returned a 404 error.
solved by this
Play video cordova
I embedded a video in my Ionic app which has a source file on my Rails application, so basically I have this
<video width="320" height="240" controls="">
<source src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>
running on this url: http://localhost:8100/#/tab/videos/8
I think it has something to do with the same origin policy, so I've already tried to disable CORS on my Chrome browser starting it with this command: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security as well as installing and activating this Chrome plugin, too: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi.
It also doesn't work from any other browser which I have installed (Safari and FireFox).
Yet, the video file will not load (the video element will just stay empty, also there is no message about a resource failed to load in my console). How can I make the video load on my localhost:8100 while the video is being served from localhost:3000?
It turned out it wasn't a CORS or server issue at all. Obviously, when working with Ionic, you need to kinda accept that your well known world of HTML has an overlay at the most obscure locations. The issue was that Ionic requires you to use the angular.js src attribute ng-src="path/to/your/file", making the following work:
<video width="320" height="240" controls="">
<source ng-src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>