I am trying to implement a background video as a landing page for a website however everything is working on all browsers except for Safari on Mobile devices.
website: http://www.ayushlal.com.au/VOS_Films
I am running iOS 13.6 (latest iOS version, not too sure what Safari version that is on my device)
Here is the HTML code:
<video loop muted controls playsinline autoplay preload="auto" src="assets/video/VOS_welcome.mp4">
<source src="assets/video/VOS_welcome.mp4" type="video/mp4"></source>
</video>
The .mp4 file is roughly 60MB and has not been compressed as of yet.
Thanks in advance
i had the same issue some time ago. Have you tried to set controls='true'? It worked for me. By default without setting a value, the controls are false.
issue was to do with Low Power mode. Once disabled, video started playing perfectly fine.
Related
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>
There is a video in the application and I used html tag to play the video in the application. And video is proper working in any android version and iOS below 12 version.
But in iOS 12 it's not playing.
<video
class="anim-img" height="360px" width="360px"
id="receivevideo" src="{{receive.video}}"
poster="{{videoThumbnail}}" preload="auto"
type="video/mp4" webkit-playsinline playsinline>
</video>
In above code I will get the video url from the webservice which is given in src and for thumbnail of the video I used poster and it is also come from the webservice.
I tried to add "controls" in the video tag which are given in some solutions but still it's not working in iOS 12 and above.
I turned off the low power mode in iOS device and it worked.
The video is working perfectly fine.
But still I need solution if the device is in power mode then how will the video play?
I have working code for a video element within my site thats fully functioning on ios 9/10 and all the normal browsers (chrome/ff/ie) etc.
I've noticed that since the ios 11 update the videos no longer play or even work at all. They appear as a blank box with the controls but pressing play does nothing and opening the video full screen does nothing.
Here is my relatively simple code
<video playsinline onclick="play()" controls autoplay
controlsList="nodownload">
<source src="assets/images/video_im.mp4" type="video/mp4">
</video>
I've tried different variations of using playsinline="true" and controls="true". They have no effect.
I've tried to google the issue but there seems to be nothing except a podcast taking about ios 11 removing html5 video support, surely there is a fix?
Any insight/help would be much appreciated.
Cheers
It looks like the following code:
<video>
<source src="path/to/video.mp4">
</video>
stopped working on ios11 (with many other features too...). I confirm that source tag did work on ios9 here). Try placing the src="path/to/video.mp4" into the video tag directly, it should work on ios11.
A working example taken from webkit.org post on New video Policies for iOS:
<div id="either-gif-or-video">
<video src="image.mp4" autoplay loop muted playsinline></video>
<img src="image.gif">
</div>
Safari on MacOS seems to have a similar problem, maybe it's easier to test there. Looks like we lost the multiple source feature tho :(
I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.
e.g.
instead of:
<video src='/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/myVideo.mp4' controls> </video>
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 am going through strange problem with chrome, I am working on a web page that has 13 Mp4 Videos on page which I load using HTML5 Code as given below.
<video width="900" controls>
<source type="video/mp4" src="videopathhere">
</video>
URL of the page is http://www.htsolutions.com/beta/company/clients, when I open this page in chrome it will show 8 video thumbnails and then it will stop loading, it won't even load other pages of the website until this page is closed.
Did any one run through this isssue? well, whatever (first eight) video thumbnails are loaded do play when clicked on them, so no problem with running the videos only problem is loading entire page, this page works fine under firefox and other browsers.
I am checking this on chrome version 48.
Regards
Manoj Soni
It took long time, less views and no answer for me to get into the solution of the answer.
Chrome always run into issue when we use more than specific number of MP4 HTML5 videos on the page and hangs, solution for the same is not preloading the video, so my video tag changed to this.
<video preload="none" width="900" controls>
<source type="video/mp4" src="videopathhere">
</video>
Issue is resolved, I am putthing this answer for anybody who is running into the same problem.
Regards
Manoj Soni