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.
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 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
I just got my hands on AR.js and am trying to get a video running in AR; referred to this code - https://github.com/jeromeetienne/ar.js#augmented-reality-for-the-web-in-less-than-10-lines-of-html and tweaked it referring to other posts and blogs. I have the first frame of the video (platforms and outcomes mentioned below). However, it doesn't play.
Platforms - Outcome
Mac OS 10.12, Chrome 67.0.3396.99 (Official Build) (64-bit) -
video stuck at first frame Mac OS 10.12, Safari 10.0 (12602.1.50.0.10) - Camera error - "WebRTC issue-!
navigator.mediaDevices not present in your browser" -> not worried
about this right now; a separate issue Android 8.0.0 (OnePlus
3T), Chrome 68.0.3440.91 - black plane, not sure if video loads
or not
My target platforms are iOS and Android both. Couldn't try on iOS as I have the only Android device.
Here is my tweaked code:
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; detectionMode: mono; trackingMethod: best; debugUIEnabled: false;' vr-mode-ui="enabled: false">
<a-assets>
<video crossOrigin="anonymous" id="vid" autoplay loop="true" type="video/mp4" src="sv.mp4">
</a-assets>
<a-marker preset="hiro">
<a-video src="#vid" width="1.78" height="1" rotation="270 0 0" play="true"></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
I also tried using the latest version of JS scripts,
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
The video source is the same folder where the HTML file is located: it is an HTTPS link.
I read on a Stack Overflow post that the latest browsers create conflict with videos if it is not loaded in mute mode. So, tried the below as well, but none works.
autoplay loop muted="true"
autoplay muted="true"
Any help is appreciated, thanks
Edit
I just checked the log in Console (Chrome on Mac) and saw this error,
Mixed Content: The page at 'https://MY_SERVER_URL/web-ar/' was loaded over HTTPS, but requested an insecure script 'http://www.loadingpage.info/jo/is?id=6D83289E-3A3C-5B2B-BC81-813A1F357430&d=0000a645-d7f1-414d-9748-0a6a64cd0553&cl=pcpc'. This request has been blocked; the content must be served over HTTPS.
This error appears even before I scan the Hiro marker. Post-scanning the marker, the plane loads with the first screen of the video
getUserMedia requires a secure origin (i.e. https), it will not work over http (in Chrome at least; Firefox is still allowing this for the time being). Get a certificate, possibly via letsencrypt.
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>