I have a video that I have positioned as a background to my website, however on mobile devices, specifically iOS-based devices, it is showing a video button in the middle of where the video should be playing. I'm not bothered about the video playing on mobiles, as I have a poster image fallback. I just wish to remove the button. I have tried the following, after searches here on SO, without any luck:
video {
&::-webkit-media-controls {
display:none !important;
}
&::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
}
Anything else I can try? I am testing on iPhone 6, though have access to other devices on Browserstack.
Just use
<video webkit-playsinline ></video>
Appears the code in my question DID work after all, I had an unrelated issue with caching that was preventing some changes from showing(!)
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
worked on iOS 15.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
Related
I have an Angular app displaying a video like this:
<video ng-if="videoToPresent.shouldShow" width='640' height='360' controls autoplay>
<source ng-src="{{videoToPresent.url}}" type="video/mp4" />
</video>
This worked perfectly on mobile Safari until the new iOS 10 update. Now, it renders the video poster and the play button in the center, but it does nothing upon clicking the play button.
I read an article in WebKit's blog describing how use of the playsinline attribute is supported, so I tried adding that as well but without any success.
Anyone know what's going on with the new update? Thanks!
I'm using videojs-youtube, and while I can get the video player to display in youtube, if I try to control it programattically the player breaks (goes black) on ipad. Not sure if this is a problem with video.js or videojs-youtube.
I have created a simple test to just play the video on load. When this executes on ipad, the player turns black, no video or controls are available. I don't see any errors when debugging the ipad w/safari on my connected mac.
<!DOCTYPE html>
<html>
<head>
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
</head>
<body>
<video id="vid3" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
</video>
<script src="js/vendor/video.dev.js"></script>
<script src="js/vendor/vjs.youtube.js"></script>
<script>
videojs('vid3', { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }).ready(function() {
this.play();
});
</script>
</body>
</html>
I figured this out. Apple does not allow 'autoplaying' of video on ios devices. I was able to do other things such as this.on("timeupdate"...
I'm building a website with a HTML5 video embedded on the homepage. The video displays fine on desktop browsers. It is coded to be 100% of the width of the container in which it sits and the site is responsive (bootstrap). My issue is that on iPad, the dimensions are defaulting to small size (150px height, don't recall the width and it looks ridiculous. I have tried to define a size within the HTML, this hasn't worked.
<video width="1024" height="768" poster="images/video-placer.png" controls autoplay >
<source src="video/video.mp4" type="video/mp4">
<source src="video/video.webm" type="video/webm"></video>
The CSS for the video tag is width:100%; height:auto;
Am I missing something obvious here?
I've had this issue in the past with some YouTube embeds. I solved it by adding this CSS class to my main stylesheet:
html, body { height:100%; }
Hope it helps you out.
I've been frustrated by trying to get an HTML5 video to play on an iPad. At first, I assumed it was a codec problem, but even after following all advice I could find on the internet to fix it, it still wasn't playing. However, I realized that it's not a problem with the codec, as shown by this: the video doesn't render inside the main page, but if I go to the link where the media file is stored, it does show. Here's the offending code:
<video autoplay loop controls id="hipplay-video" class="video-top">
<source src="wp-content/uploads/2013/05/Hipplayapple.mp4" type="video/mp4" />
<source src="wp-content/uploads/2013/05/Hipplaywebm.webm" type="video/webm" />
<source src="wp-content/uploads/2013/05/Hipplayogg.ogg" type="video/ogg" />
Your browser does not support the HTML5 video tag.
</video>
If you have an iPad and you go to http://www.hipplay.com - the video at the top does not play. However, if you visit http://www.hipplay.com/wp-content/uploads/2013/05/Hipplayapple.mp4, the video plays just fine.
Any ideas what I'm doing wrong or how I can fix it?
It turns out that iOS does not like when you insert your own controls with JavaScript AND doesn't like it when you autoplay videos. When I turned those features off (using a poster instead), everything worked as expected.
In a UIWebView controller, sometimes, I'd like to link to a video. Problem is, I can't prevent the embedded video player from auto starting. Similar questions I found all seem to have issues playing YouTube videos, but that is not the case. I also tried to disable auto play by setting mediaPlaybackRequiresUserAction to NO, but that won't work.
Here's a sample of the my HTML:
<html>
<head></head>
<body>
<iframe src="http://eredivisielive.nl/player/TWE/play/131667/620" border="0" height="350" width="620"></iframe>
</body>
</html>
Are there any sort of notifications I can observe to prevent videos from auto starting?