So I've looked over the apple docs and checked that my video will play inline (I am storing the video on s3).
My video on https://themobilecigarlounge.com will play on all devices and browsers with the exception of apple. It will play but not until you click a link and then go back to the homepage.
<video class="video-background" id="backgroundVideo" playsinline="playsinline" autoplay="autoplay" muted="muted"
loop="loop">
<source src="https://cigarlounge.s3.amazonaws.com/Cigar-Rolling-Suit-medium-new.mp4" type="video/mp4" />
<source src="https://cigarlounge.s3.amazonaws.com/Cigar-Rolling-Suit-medium.mov" type="video/mp4" />
</video>
Is the code I am inserting it with. What am I missing here? I have all the tags, I stripped the video of its audio track and I have it muted.
This turned out to be an issue with the Meteor framework I was using. I do not understand the root of the problem but it is some sort of rendering issue. I noticed where in one site this function was working perfectly the <video> tag was within a {{#if}} helper.
So I experimented and put the video within an if block that became true 100ms after the page rendered.... This solved the problem but seems hacky. Seems to be some sort of issue with the blaze templates rendering.
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>
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>
Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.
I have a full width background video with autoplay and loop propreties and works really good on desktop but in mobile video dont show and dont start... just show a black screen
I need to fix this for mobile, if that's not possible to put video working on mobile I can put a background image on mobile
<video autoplay loop muted autobuffer preload="auto" poster="poster.png" class="background-video">
<source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
</video>
adding playsinline attribute to the video tag fixed the issue for me.
according to a good google search, on mobile the Video element falls back to a poster...
be mind full of video size so they user will not encore massive data usage charges and to maintain a responsive site.
<video playsinline autoplay loop muted id="myVideo"></video>
The Autoplay tag on mobile is generally not supported - this is to avoid users incurring data transfer costs as video files are large and can eat into data limits.
The poster tag should work fine, however, as I think you noted in your last comment.
Turns out the video actually plays - but it's weird how that happens!
First of all, I'm testing on Android 5.1.1.
Alright, here's the situation:
On load, the video doesn't play but instead displays the fallback poster image.
I had given up on the video thing, but when I was navigating the site and at some point decided I wanted to go back Home, I navigated to the Homepage and the video was playing! I tried refreshing the page, and the video didn't play on load but instead got the poster image!
What could be happening?
I figured just clicking the phone's back button to navigate to the homepage still didn't play the video, but explicitly clicking the home link did!
So I gave it another shot - refreshed the page, video didn't play, clicked the home link and the video started playing on load!
This is the structure of my home link: <img src="path-to-logo" />
Can somebody explain what could be happening?
My HTML5 video player won't play a file longer than one hour. Here is my code:
<video src="/Movies/MP4/Blaa.mp4" controls="controls"></video>.
I am quite new to HTML5 so i am asking what the problem could be? Any answers are appreciated.
-Simon
It looks like you're only using a single mp4 file, so I'm not sure if this will help, but I was able to solve my problem by switching the order of my source files. From what I can tell, Chrome is able to play H.264 video (which is what is usually contained within the MP4 wrapper), but it is unable to play MP4 files. I'm guessing that they finally removed support for MP4 like they've been saying that they were going to.
Here's what my code used to look like:
<video width="640" height="360" controls>
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
From my understanding, when a browser tries to render an HTML5 video tag, it's supposed to skip over any source tags that it can't play, and attempt to play the first one that it can. For whatever reason, Chrome is not currently doing that. It's trying to play the MP4 anyway, and failing.
Even the video on the "Video for Everyone" page is failing for me now.
My solution was to switch the order of the source tags so that the webm video came before the mp4 video:
<video width="640" height="360" controls>
<source src="http://example.com/video.webm" type="video/webm" />
<source src="http://example.com/video.mp4" type="video/mp4" />
<source src="http://example.com/video.ogv" type="video/ogg" />
</video>
So far this has fixed the problem. Chrome now plays the webm file with no issues, and all other browsers I have tested still seem to work fine.
The only possible problem that I still need to test for is that I've read that the iPad had a bug that required the MP4 source to be listed first. I'm working on getting my hands on an iPad to see if that's still an issue.
For now, this solution fixed my problem.
Hope that helps!
The problem was that chrome won't play MP4 movie files at the moment. Safari is the only working browser right now.