Background video is not playing in iPad devices. I've tried to add playsinline as well. Video is playing in browser Mac.
I use this code:
<div class="video-container"><video muted loop autoplay playsinline controls="true"><source src="./media/199.mp4" type="video/mp4"><source src="./media/199.ogv" type="video/ogv">Your browser does not support HTML5 video. </video></div>
Can you explain what you see? Is it blank with a play button? One possibility is that your iPad is in low-power mode, autoplaying videos never play on iOS in low-power mode.
If the problem is that the video is not auto-playing, note that the autoplay directive is very finicky. Adding muted by no means guarantees that the video will play. In the past, programmatically playing a muted video was the only way I could get autoplay to work, that code is shown below.
// Call this function after the document loads
function onload() {
document.getElementById('your_video').play();
}
It could be a CSS issue where the video has 0px height. Set the background color and check that you see the change.
Related
I've implemented a video into my website and this is how I did it: <video autoplay muted loop> (The video has no audio.)
Unfortunately, on mobile, the video does not autoplay and when I hit play the browser opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.
I really don't want this to happen. – What is happening and how can I avoid this?
The "lightbox"-problem can easily be fixed, you just have to add this attribute: playsinline to the video tag. – Great documentation here: https://css-tricks.com/what-does-playsinline-mean-in-web-video/
The video did not autoplay on my iPhone because: "Low Power Mode", was active. – Found that out here: Autoplay muted video iOS 11.2 :)
I'm trying to play an external HTML5 video within a webOS web application. According to this question, webOS should support .mp4 video, but whenever I try to play a HTML5 video within my application, the video simply won't load/play. My code (for testing purposes):
<video id="demo-video" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4"
type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I've tried different sources, but none of them seem to work. When testing in a browser, it does work, but when opening the application on a webOS Smart TV, nothing happens. Even trying to play a local .mp4 file doesn't work.
I found out that .play() on the video element returns a Promise with status pending. Strange behaviour and reloading the source doesn't fix the problem.
I found the problem: it had something to do with the styling I applied on the <video> element. When developing, Chrome showed the video just fine. But apparently, border-radius is not allowed? At least not in the version of Chrome used on the Smart TV and emulator. So if you're experiencing the same problem, check for styling that may cause the video not to play.
Try adding width and height attributes to your video tag. The video works on my TV.
<video id="demo-video" width="1920" height="1080" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
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.
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/
I´m trying to autoplay and inline an html5 video on a web page. This works fine in all browsers and all devices (except for some Android devices). However, if you place the video on the lower parts of the page (outside the viewport) and scroll down to it, the video does not autoplay anymore in OSX Safari (version 11). Other browsers like Firefox and Chrome don´t show this problem.
When you scroll down, having the video visible, and refresh the page, the video will autoplay however.
<video id="videoheader" playsinline autoplay="autoplay" muted loop data-flashblockwhitelisted="true" poster="posterimage.jpg">
<source src="video.mp4">
</video>
The website is still in development (and not online yet), but a good example of a page which shows this problem too, is:
http://www.pixomondo.com/
The video's in the lower parts of the page, won´t autoplay in Safari.
It seems that Apple has disabled autoplay feature for html5 video outside the viewport. In older versions of Safari (version 6.1.6) it performed well.
Any suggestions or code examples how to get around this problem?
It looks like your video is autoplay and muted - there is a known issue which is addressed in one of the later Safari release which may addresses this [my bolding]:
Media
Implemented HTMLMediaElement dispatch of the onencrypted event
Fixed autoplay muted videos not playing when outside the viewport
Fixed HTMLTrackElement behavior to match standards
More info on the preview releases here: https://developer.apple.com/safari/technology-preview/release-notes/
You can download the preview releases here to verify if this solves your issue: https://developer.apple.com/safari/download/
I have a video tag used in one of my views
<video
id="Video1_#Model.Id" width="80%" onerror="failed(event)"
controls="true" autoplay loop class="embed-responsive-item"
type="video/mp4 src="filepath" </video>
and I am able to play the video in ie and chrome. Where as the requirement is the video should be playable in ipad and iphone. But I couldn't play it in mobile devices and as well as safari desktop.
When I am testing in ipad, the video widget loads with play button, when I click on play button, it doesn't respond.
Please let me know where I am going wrong.