I'm trying to remove airplay button from native Safari video player on iOS and Mac and I was not able to find a working solution.
It seems imposible to disable it even though documentation says otherwise
I use an .m3u8 source for the video (an online stream from Wowza).
Safari ver. 12.1.1 on Mac, iOS 12.1
I have added x-webkit-wirelessvideoplaybackdisabled, x-webkit-airplay="deny" attributes.
https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW6
I also set disableRemotePlayback on video element object to true but the airPlay button is still present.
https://www.w3.org/TR/remote-playback/#dom-htmlmediaelement-disableremoteplayback
...
const $video = $(`<video style="width: 100%; height: 100%" class="ios-video" controls autoplay muted playsinline x-webkit-airplay="deny" x-webkit-wirelessvideoplaybackdisabled>`);
$video[0].disableRemotePlayback = true;
$video[0].src = stream;
$(self.playerSelector).append($video);
...
I expect that there would be no AirPlay button, but unfortunately even so the webkitWirelessVideoPlaybackDisabled attribute on video element in js is set to true an AirPlay button is still present.
Opting Into or Out of AirPlay
Video playing in your app or from your website can be enabled for AirPlay or not, at your discretion.
In apps compiled with the base SDK set to iOS 5.0 and later, AirPlay is enabled by default; if you do not want iOS-based devices to be able to play your video over Apple TV, you must disable AirPlay explicitly.
To explicitly opt out of AirPlay, set x-webkit-airplay attribute for the video tag or the airplay attribute for the embed tag to "deny", as shown in Listing 2-2.
x-webkit-airplay="deny"
I know you said you did that in your question, but that is the solution according to Apple.
Related
does someone know how to prevent Chrome and Safari from autoplaying videos? I am looking for an attribute or style I can incorporate into our website, not a browser extension! We have a few videos on the same page and in Chrome they just all start auto playing for some users while in Safari they kind of autoplay, but they don't start at the same time. They all have sound, so I had expected none of them to autoplay, but apparently that is not the case (at least not for all users).
Thanks!
Use autostart=0 and autostart=1
HTML embed autoplay="false", but still plays automatically
https://support.google.com/chrome/forum/AAAAP1KN0B0LkA8FoBoleU/?hl=en&gpf=%23!topic%2Fchrome%2FLkA8FoBoleU
Make sure you use the video or audio HTML5 elements, and NOT object or embed. I also had this problem using the latter HTML elements and the ONLY way to stop them from autoplaying was to change the browser settings. The reason is, because object and embed use a 3rd party plugin or player when playing your media, while video and audio are native to the browser.
If you want to stop them from playing anyway on just your box, below are the settings for Firefox:
Open up your Firefox Browser, click the menu button, and select "Options"
Select the "Privacy & Security" panel and scroll down to the "Permissions" section
Find "Autoplay" and click the "Settings" button. In the dropdown change it to block audio and video. The default is just
audio.
This works perfect with other browsers but safari automatically downloads file.
<iframe src="lib/audio/voice.mp3" allow="autoplay" class="audio-main" id="iframeAudio">
</iframe>
I need play background audio in a website. Opera and Chrome are working fine unfortunatelly Safari Browser open website automatically audio download.What exactly is the problem, Thanks for advance
No Auto-Play by default says the man
According to Safari / WebKit Auto-Play policy it gives users the ability to browse the web with fewer distractions, particularly in the form of relief from websites that auto-play with sound. They instruct websites to assume that any use of video or audio will require a user gesture or click to play.
Policy configuration
Users can enable auto play functionality on a per website bases.
Safari >> Preferences >> Websites >> Auto-Play
Options are:
Allow All Auto-Play
Stop Media with Sound (default)
Never Auto-Play
Functionality iframe allow autoplay works in Safari
When the user has allowed auto play from a specific website the iframe tag works as expected.
<iframe allow="autoplay" src="happy.mp3"></iframe>
Not surprising though so too does the <audio> element load and play on its own.
<audio autoplay loop src="happy.mp3"></audio>
Detect auto play is disabled and display player
However it should be expected that this functionality will not be enabled, since the ability exists for users to disable it, so it’s important to detect if auto play was denied and proactively react accordingly.
var promise = $('video')[0].play();
if (promise) promise.catch(error => {
// Auto-play disabled show controls
$('audio').attr('controls', '');
});
For this option we do not need auto play at all since we are manually calling play. This will not work of course if a user action is required so all we are left to do is to add the controls and display the player.
Audio with controls
For the sake of completion, there's always the other option; avoid auto play all together... but what's the fun in that.
<audio controls src="happy.mp3"></audio>
nJoy!
Update:
I did a fully build via Android studios, and the HTML5 Video does not work at all. It may be related to it targeting a web site? Though I can have the app open a website from the app directly, so maybe something else I am missing. I also tried with the video in the app directory, but again, it did not seem to load at all.
I am building a Cordova/Framework7 app that I need to embed videos into.
The video loads, and I can scroll back and forth through the video, but the giant PLAY button does not respond when touching it in app.
<video id='video' controls>
<source src="https://website.com/FancyVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video
</video>
I've tried to make an event listener to trigger the video (with and without the onload bi)
window.onload = function() {
var video = document.getElementById('video');
video.addEventListener('click', function () {
video.play();
}, false);
}
So I am not sure what to do, it should work.
I have followed several other question threads but none seem to work, or are mostly obsolete. I have also tried media plugins with similar results.
HTML5 element on Android
html5 videos not showing controls on android once loaded
Note:
I am using
PhoneGap desktop application, and a Galaxy S7 running Android 8.0.0
Cordova Android Version 7.1.0
Cordova Version 8.0.0
Framework 7 Version 3.0.1
PhoneGap Version 8.0.0
I created a website for preview of HTML5 video autoplay, but it is not working on iPhone and Android 4+. Can anyone please let me know how can i make it work?
As of iOS 6.1, it is no longer possible to auto-play videos on the iPad.
My assumption as to why they've disabled the auto-play feature?
Well, as many device owners have data usage/bandwidth limits on their devices, I think Apple felt that the user themselves should decide when they initiate bandwidth usage.
After a bit of research I found the following extract in the Apple documentation in regard to auto-play on iOS devices to confirm my assumption:
"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.
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 auto-play are disabled. No data is loaded until the user initiates it." - Apple documentation.
Here is a separate warning featured on the Safari HTML5 Reference page about why embedded media cannot be played in Safari on iOS:
Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback. A controller is automatically supplied on iPhone or iPod touch once playback in initiated, but for iPad you must either set the controls attribute or provide a controller using JavaScript.
What this means (in terms of code) is that Javascript's play() and load() methods are inactive until the user initiates playback, unless the play() or load() method is triggered by user action (e.g. a click event).
Basically, a user-initiated play button works, but an onLoad="play()" event does not.
For example, this would play the movie:
<input type="button" value="Play" onclick="document.myMovie.play()">
Whereas the following would do nothing on iOS:
<body onload="document.myMovie.play()">
Source taken from :
Can you autoplay HTML5 videos on the iPad?
but as for android,
here you go
http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/
Does anyone know if there is a way to get Airplay to work on an html5 video that is using CUSTOM CONTROLS? That is the important part, I realize that you can just add the x-webkit-airplay="allow" attribute to the element if you are using the built in html5 controls. But my video player uses custom built controls.
It appears that Safari will put the Airplay button on the built in html5 controls, but is there a way to do it if I'm not using the built in controls? Here is a link to the html5 player I've written. Notice that the controls at the bottom are my own:
http://pluralsight.com/training/Player?author=keith-brown&name=aspdotnet-security&mode=live&clip=0&course=aspdotnet-security
Thanks!
Good news here! The feature has been implemented in Safari 9.
Safari 9.0 allows you to create custom controls for HTML5 media with JavaScript AirPlay support. Use Safari's WebKitPlaybackTargetAvailabilityEvent to detect Airplay availability and then add your own controls for streaming audio and video to AirPlay devices.
Via. What's New in Safari 9
Here's an example from HTML5 video и кнопка для AirPlay
// Detect if AirPlay is available
// Mac OS Safari 9+ only
if (window.WebKitPlaybackTargetAvailabilityEvent) {
video.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) {
switch (event.availability) {
case "available":
AirPlayButton.show();
break;
default:
AirPlayButton.hide();
}
AirPlayButton.on('click', function() {
video.webkitShowPlaybackTargetPicker();
});
});
}
Sadly Apple hasn't implemented Airplay JavaScript event calls, this is mostly because when you use AirPlay in your native quicktime controls AirPlay prompts the user with near by AirPlay devices. Currently there isn't a Safari specific JS implementation to pull this data in your content and create buttons based on what's available.
As of Feb 2013, the only thing you can specify for AirPlay in HTML5 is if you wish to show or not show AirPlay controls.
https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html
You can file a bug with Apple if this is a feature you would like in future releases:
https://bugreport.apple.com/
Hope this helps.
We can check webkitcurrentplaybacktargetiswirelesschanged event to catch switch off airplay device:
this.on(videoEl, 'webkitcurrentplaybacktargetiswirelesschanged', this.checkWireles);