Recently I have noticed that the video elements on my site no longer autoplay on iOS Safari or desktop Safari.
The current code looks something like this:
<video playsinline autoplay muted loop poster="/path/to/poster.jpg>">
<source src="/path/to/video.mp4" type="video/mp4">
</video>
From my understanding, this is enough to abide by Webkit's new video policies for iOS and MacOS to allow for a video to autoplay.
I have searched for similar questions and not come across a solution. In this question it seems like the source tag itself could be the problem.
This thread suggests that iOS blocks videos from autoplaying on low power mode as well. But I've determined this isn't causing my issue.
Has anyone come across this issue themselves? Do you have a solution? Can someone point me in the direction of some Safari change logs where this breaking change was introduced?
Details
iOS 11.4
MacOS Safari Version 11.1 (13605.1.33.1.2)
EDIT
The video isn't being loaded correctly, when I check the Network panel in Safari dev tools the MP4 shows up under 'Other' with the error "An error occurred trying to load the resource".
If I try to play the video directly in Safari (eg: go to https://my-website.com/path/to/video.mp4) I get the error Failed to load resource: Plug-in handled load
I think it's because my video is a file blob, and Safari expects videos to be from streaming servers (as mentioned in this question)
EDIT 2
Might be something to do with how Safari is introducing the ability to use videos in img tags? See this and this
Related
Here is the link to the bigcommerce store I'm working on. It shows background video on all the devices except IOS devices on any browser.
https://axict.mybigcommerce.com/
Looking for help in this weird issue.
Thanks in advance.
Here is the video element code,
<video id="bannerVideo" class="bgVideovideo" autoplay loop muted playsinline>
<source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.webm"
type='video/webm;codecs="vp8, vorbis"' />
<source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
Your browser does not support the video tag.
</video>
From a quick check this actually does not work on Safari on MacOS either and it does on Chrome on the same Mac.
Looking at the network traffic you can see the server responds with a '200' to the byte range request from the browser for the video, which Safari does not handle well, although Chrome does:
The most common root cause of this issue appears to be servers that are not configured to handle range requests in what Safari consider the correct manner. It expects to see a '206' response when it sends a request with a byte range.
There is more discussion and examples in the answer here: https://stackoverflow.com/a/32998689/334402
Looks like you've uploaded the video to WebDAV - just like Mick's answer, the file hosting server that BigCommerce WebDAV uses is not configured to send the correct request type that IOS/Safari is looking for when loading a <video> element's source.
When I ran into this, I had to upload the video to AWS S3 Storage. You should be able to get 5GB permanently on the free tier.
I am building a little application to display a video for users and I am having a lot of issues with mobile devices. It seems to work perfectly on desktop, and hit and miss on mobile. It works on one iPhone, but not another and it definitely does not work on my android even when i navigate directly to the files.
Here is my code.
<video id="video1" width="600" controls="">
<source src="~/Content/Video/mov_bbb.mp4" type="video/mp4">
<source src="/Content/Video/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
its ripped right from the example from w3schools http://www.w3schools.com/html/html5_video.asp files and everything. When I visit that site on the mobile device, it works, when hosted on my site it doesn't.
here is a screen shot of the android device, the player shows up but nothing i can do will play the video
I am running windows server 2012, and the android device is Android 4.4.4; SM-N900V Build/KTU84P, Chrome 41.0.2272.96.
because these files and code are ripped directly from another source that seems to work the only thing I can think of is that something on the server is not set up correctly.
thanks!
The tag is only supported by modern browsers. The problem you are facing is with browsers running on the client mobile or desktop and not your servers.
See browser support to understand which versions are supported: http://en.m.wikipedia.org/wiki/HTML5_video
we have installed the player on our web page using an html5 element design, however, the player fails to load the controls which allows the video to be played.
We do not have this problem on any Android device this is only effecting the iOS devices.
Here is a link to see the player we have implemented:
https://liveconferencepro.com/vp/viewHTML5.php?id=tah1pa
Can someone please tell us where we can obtain the correct code so the player will work for iOS devices?
Tom
The player was broken for me in Chrome for multiple reasons. The first was that the link took me to the page served over SSL, but the Videojs includes were via http, which meant they were never loaded due to being insecure content.
Once I fixed that, I noticed this error in the console: Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '<source' is not a valid attribute name.
This seems to be because you didn't close the opening video tag:
<video id="videoPlayer" class="video-js vjs-default-skin" controls autoplay preload="auto" width="412" height="232" poster="https://liveconferencepro.com/vp/logo.jpg"
data-setup=""
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
...
</video>
Finally, keep in mind that if you want to use custom controls on mobile, you'll need to enable custom controls. Due to idiosyncrasies in mobile devices, for now we've disabled custom controls by default, but you can set the option to nativeControlForTouch: false to disable this.
Hope that helps!
I'm currently trying to set up a connection between my web client and my iOS app, but for some reason my iOS client only sees a black box when using Chrome (version 33). I can see the video just fine if I use Firefox (both in my app and when I put the browsers side-by-side, they can see each other).
This doesn't appear to be a documented known issue with the JavaScript SDK, and I can't see any recent discussion about this on the forums (last post was mine).
The iOS sample can be located here (samples/OpenTokHelloWorld) with the browser page in samples/OpenTokHelloWorld/browser_demo.html
I suggest cd'ing into samples/OpenTokHelloWorld and running python -m SimpleHTTPServer, as it can't be run from a file:/// path.
Here is what my iPad sees:
Chrome:
Firefox:
And Chrome/Firefox (respectively), both publishing video from the same camera
Edit: after testing on other machines, it may be something specific to my environment even though none of my extensions run in Incognito and I don't have any custom plugins installed.
It looks like the OpenTok mobile SDKs with the specific webcam I was using has issues. On Android the video stream will display for a brief moment then segfault, and on iOS there will be no video at all.
I have tested this many times and could not reproduce what you are seeing in your chrome.
Without seeing any console errors or iOS logs the best suggestion is to try clearing your cache, or maybe restarting your computer (longshot)
I have a simple html 5 video on a page that works in Chrome and Firefox but not in Safari.
<div class='show_page_video'>
<video controls='' height='320' id='movie' poster='http://cloud-coach-dev.s3.amazonaws.com/58e68874774da1c4d18b37dc9dee3c9c_1.jpg' preload='none' width='400'>
<source src='http://cloud-coach-dev.s3.amazonaws.com/58e68874774da1c4d18b37dc9dee3c9c.ogv' type='video/ogg'></source>
</video>
</div>
The video poster loads but the video isn't grabbed and when I click play nothing happens, also in the network tab I don't see any attempt at grabbing the video data.
Anyone run into this issue before?
It appears I was flawed in my thinking Safari supports OGG so I just had to rework some things to have multiple encodings for videos and added an mp4 fallback source