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
Related
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.
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.
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>
I am using html5 <video> tag to play a video in the iPad/iPhone its playing good in local but when i update to the server i am just getting the play icon and its stuck there itself.
<video controls="true" preload id=videoContainer>
<source src=video/abc.mp4 type=video/mp4>
<source src=video/abc.ogg type=video/ogg>
<source src=video/abc.webm type=video/webm>
Your browser does not support the video tag.
</video>
Create .htaccess and added the following lines in it
AddType video/ogg .ogv
AddType video/mp4 .mp4