I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:
Removing overlaying divs won't fix it
Removing z-index won't fix it
Wifi or Cellular doesn't make a difference
Video filesize doesn't make a difference, too
Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9
Does playsinline attribute help?
Here's what I have:
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>
See the comment on playsinline here: https://webkit.org/blog/6784/new-video-policies-for-ios/
iOs 10+ allow video autoplay inline. but you have to turn off "Low power mode" on your iPhone.
Here is the little hack to overcome all the struggles you have for video autoplay in a website:
Check video is playing or not.
Trigger video play on event like body click or touch.
Note: Some browsers don't let videos to autoplay unless the user interacts with the device.
So scripts to check whether video is playing is:
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});
And then you can simply autoplay the video by attaching event listeners to the body:
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('home_video');
if (videoElement.playing) {
// video is already playing so do nothing
}
else {
// video is not playing
// so play video now
videoElement.play();
}
});
Note: autoplay attribute is very basic which needs to be added to the video tag already other than these scripts.
You can see the working example with code here at this link:
How to autoplay video when the device is in low power mode / data saving mode / safari browser issue
I had a similar problem and I tried multiple solution. I solved it implementing 2 considerations.
Using dangerouslySetInnerHtml to embed the <video> code. For example:
<div dangerouslySetInnerHTML={{ __html: `
<video class="video-js" playsinline autoplay loop muted>
<source src="../video_path.mp4" type="video/mp4"/>
</video>`}}
/>
Resizing the video weight. I noticed my iPhone does not autoplay videos over 3 megabytes. So I used an online compressor tool (https://www.mp4compress.com/) to go from 4mb to less than 500kb
Also, thanks to #boltcoder for his guide: Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)
I had the same problem - the video not play on iOS. I tried all the code options "playsinline autoplay loop muted". The problem was the video I received was in the wrong mp4 codec. So what helped us, was to upload the video to Vimeo and download the HD Version again. The video is now playing on all mobile devices.
You could also try to use mpeg streamclip. Here is a screenclip of VLC - those are the correct settings. Hope someone does not have to spend 2 hours searching for the problem - happy holidays
Here is a simple solution to auto-play the video in IOS, I've already tried and it is perfectly working on IOS, Android, also on all the browsers on various platforms.
simply use (data-wf-ignore) and (data-object-fit) Attributes for the video and data-wf-ignore for the source tag..
You can see the working example with code here at this Snippet:
<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>
Related
So a feature of IOS low power mode is to not play a video (on iphones) when autoplay is present i.e.
<video id="video_1" class="video" autoplay="autoplay" loop muted playsinline poster="./assets/video/poster.jpg">
<source src="assets/video/echo-video-optomized2.mp4" type="video/mp4">
your browser does not support HTML5
</video>
I am aware that you can use an event listener to detect this issue:
let header_video = document.getElementById('video_1');
header_video.addEventListener('suspend', () => {
console.log('Device has suspened the video from playing')
header_video.play()
})
I thought I could be sneaky and then this is detected just ask the video to play via:
header_video.play()
I've tested that the .play() and .pause() functions work on desktop but this does not work on Iphone - I suspect that the clever devs at apple have disabled these features while low power mode is on but (and here is the questions):
1: Is that the case? have the devs removed/prevented JS from using .play() / .pause() on low power mode for IOS deveices? (also is that universal for adriod as well?)
2: Can you force the video to play?
Thanks in advance for any help and feel free to ask any related questions -
Wally
I have TV video stream (which is apparently mpeg-ts stream), if I use html5 video tags it all works find on win/mac machines using Chrome.
<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
<source src=""http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matroska type="video/webm">
</video>
But that doesn't work on Android tablet nor on iOS.
I have tried installing multiple different JS player, such as mediaelement, plyr, video.js, mpegts... And I have installed like all three browsers on Android tablet - Chrome, Opera and Mozilla for testings. Every single JS player works fine if I watch the video from my laptop (Chrome), but none of them works when I access from Android device.
The furthest I can get is using Opera+plyr(or video.js) to get an audio playing fine, but with a black screen, no video.
add this as your video starting tag and it will autoplay for android and safari mobile :
<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%">
you also need mp4, ogv and webm formats for crossbrowser
This might work for you. It works fine for me.
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline>
I would try enabling controls as on iOS if your video is supposed to start automatically it will not allow it.
Another thing is to try adding an HTTP Range Header, it helps to split video into byte ranges which is something to take into mind with mobile. This is more for iOS in general but take a look at this link: http://fdiv.net/2013/05/17/getting-html5-video-work-ios-mobile-safari
Also as mentioned by other check the format of your video you should ALWAYS have multiple types available.
Video tag doesn't work on mobile. What I've seen people do lately is use gif's as the poster of the video on mobile. I would also look into tools like Wistia for extra video support. Gifs work on mobile, but as the video assets, they take a while to load since they're usually big.
I don't recommend self-hosting as you won't have a ton of support such as slowly loading the video or dynamically switch from 320p version to HD version as it loads, etc.
For example https://wistia.com/learn/marketing/boost-engagement-with-gifs
If you're using a separate host for your files, its server should have a valid SSL certification like my case. My android video player did not work until I added a certification.
My team and I are tying to make a web application autoplay HTML5 video/audio tags on iPad. So far no luck after many attempts with CSS and JavaScript.
The question is: What other option is there to make it autoplay ?
I'm thinking native app with integrated browser with iOS API calls to simulate a touch/click and thus making the video/audio tags autoplay.
Is it possible and if yes, how and with which iOS version ?
Thanks
you can't auto-play videos and audios on iOS in normal mode, you may use trick like simulate user input to auto-play videos and audios.
Safari HTML5 Audio and Video Guide
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. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play" onclick="document.myMovie.play()">
This does nothing on iOS: <body onload="document.myMovie.play()">
Have you found solution for autoplay video on iOS device? If not, I've just find a solution here, you can use WeChat of iPhone to open it (just support WeChat of iPhone but not support iPad WeChat), it use video.js player, related code as below:
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" webkit-playsinline="true" x-webkit-airplay="true" width="750" height="460" poster="" data-setup="{}">
It also has solution for support video play without full screen on iOS/Android/PC.
We are developing an application that needs to auto play a live streaming video in mobile. At the moment we been only able to start the streaming by clicking over the video.
How to auto play live streaming video on mobile (inside the html)?
How to prevent the click over the video opening the mobile video player?
I've seen some articles saying neither are possible but both works on this site: webcams.com (adult)
Thanks,
<video autoplay = "autoplay" or "" (empty string) >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
autoplay Instructs the UA to automatically begin playback of the audio stream as soon as it can do so without stopping.
The <video> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
I have the same requirement before.
As I know, it is disable to auto play in some mobile browsers.
If your case can accept no auido, and then you can refer this page.
It uses canvas and WebSocket to draw the video.
I used the videojs and it is working fine all browsers(including IE) and on Android . But it is not working on IOS devices (iphone and ipad IOS version 6).
Here is the code which I am using to add the video to the page.
<video id="video1" class="video-js vjs-default-skin" width="276" height="153" controls="" preload="auto" data-setup="{}">
<source src=myvideo.mp4 type="video/m4v" >
</video>
I have spent ages and could not find any solution.
I m using video.js Version 3.2.0 and getting the loading spinner forever.
I tried using version 4 and just black screen comes up.
Any Help please.
First put double quotes around the source src attribute and try that. If that doesn't solve it, it sounds like the problem is with the mp4 itself, most likely because of the way it's been encoded or it has a huge filesize. Try using videojs's default movie (http://vjs.zencdn.net/v/oceans.mp4) and see if that works. If it works, you know the problem lies with the movie file itself.
Your web server should support byte-range requests,check whether web server support 206 response. If you are using nginx,add mp4 module.
I solved most of my mp4 encoding issues using handbrake.
Try to change type="video/m4v" to "video/mp4".
<video class="video-js">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
Offical docs.