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>
Related
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.
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 have a video that I would like to embed in an O365 website using HTML5 embeding code. When I insert it, the video works fine but as soon as I click save the video area is just a black box and I can't play it. If I click to open it in another window it does play fine though for some reason.
The code I am using is the following:
<video width="320" height="240" controls>
<source src="my video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Any idea why this would be happening?
While my questions remains valid as I don't know why it is happening, I found a work around for anyone having the same issue.
Rather than inserting the html embed code I inserted a media web part which was much easier and worked! I recommend this route!
I am trying to add a video tag to get a video player with my video like this
The video shows up fine sometimes as shown above, but most of the time it shows up weird and not functional as shown below
No matter if I click play or not, it just does not work.
Here is my code
<div class="detailRight">
<video id="video1" width="515" height="300" preload controls>
<source src="../files/MyVid1080.mp4" type="video/mp4">
</video>
</div>
I'm not sure why it works sometimes and sometimes it does not. How do I get past this bug?
EDIT1
Above is in Chrome, in Safari it is working fine, in Firefox it is giving me
in order to support all browsers i would recommend using .ogv .webm and .mp4 formats this should solve your problems their are a couple of online sites that will convert your video for free