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
Related
I have a video which plays sound but does not display the video on macOS Safari. I have tried the following solutions but didn't work:
I have tried playing around with combinations of attributes: autoplay muted playsinline loop;
I have tried converting and changing the extension to .mov;
I have tried switching between setting src in <video> tag and moving it inside with <source> tag;
I have tried settings src both absolute path and relative path; the website is https
The video plays:
in the original website,
in any other desktop browser;
if I open it in a separate tab;
in IOS Safari;
In the Safari dev tools console it says: "An error appeared attempting to open the resource".
This is the current html code used to show the video:
<video controls muted playsinline loop preload="metadata">
<source src="https://sistemecreative.ro/demo-istoma/assets/Triaj2.mp4" type="video/mp4">
<p>Your browser does not support HTML5 video.</p>
<video>
The video in question can be found at:
https://sistemecreative.ro/demo-istoma/
The current live website: https://istoma.ro/
In the live website it's the first video.
I have the strangest problem in a vue-setup.
This markup works perfectly for one page - on all devices and all tested browsers:
<video
width="960px"
height="540px"
controls autoplay muted loop preload="auto"
playsinline
>
<source src="#/assets/video/studio_sor_v1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
But this markup works only on desktop and Android for mobile. Both Chrome and Safari fails to play it on iOS mobiles:
<video
width="960px"
height="540px"
controls autoplay muted loop preload="auto"
playsinline
>
<source src="#/assets/video/studio_nord_high_sml.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Different video's, but encoded with the same encoder, same settings, same file size etc.
Some dude tried to upload the non-playing file to his site (some Vix site) - and it works there. Vue.js or server (netlify) problem?
Makes no sense to me. Any ideas?
I'm betting this is a codec issue. what is the codec of the non-playing video?
First is probably h264 (nearly universal support)
Im guessing the second is VP8 or VP9 in an mp4 container. iOS mobiles (no matter the browser) do not support these codecs.
You can check this with FFprobe Here's API for ffprobe: https://www.streamclarity.com/probe?url={videoURL}
I'm having issues with my .mp4 vidoes not playing on mobile on either Chrome or Safari (haven't tried Explorer or Mozilla). This is the code that I am using for the videos:
<video autoplay loop autobuffer muted playsinline style="width:100%; height:auto;">
<source src="/static_imgs/lo_macbook_mockup.mp4" type="video/mp4">
<img src="/static_imgs/lo_site_reskin_img.jpg" title="Legal Outreach site reskin." />
</video>
I've tried with and without playsinline and muted but still nothing. Works fine on desktop. The site with the videos listed is https://bigsheep.design/projects/legal-outreach-4
It's possible the H264 profile of High # Level 5 is not supported on your test mobile device.
Try to export (or re-encode) the video with a Profile settings of Baseline # Level 3. This basic profile can decoded by the video chips in most devices, after that you can try increasing up to Main and try different Levels for it.
In your video encoding tool, you want to find similar option to this (image from Handbrake tool):
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
I've been working on an HTML5 video implementation, but I'm having some issues. I've been following the guide at http://diveintohtml5.info/video.html. I have encoded .m4v, .ogv, and .webm versions of all of the video. Chrome and Firefox have no troubles playing the video. When I attempt to play it in Safari, it loads the video container, but not the video. You see a white space where the video should be, the controls, and the "loading" text. In Web Inspector's network tab, the video's status is "pending" and the mime-type is "undefined". Interestingly, I only experience this problem on the staging site, while it works fine on my local dev.
When I visit the video directly in the browser on local dev, I get the following output in the console:
Resource interpreted as Document but transferred with MIME type video/x-m4v.
GET http://site.dev/content/videos/movie.m4v Plug-in handled load
Note that GET has a little red x to the left of it in the inspector.
My html code looks like:
<video class="html5-video" width="700" controls>
<source src="content/videos/movie.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="content/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="content/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support this video.
</video>
Additionally, the video is ~20mb.
Any thoughts? Thanks!
Well...it turns out that the issue occurred because I was using .htaccess to password protect the directory. Interestingly, all browsers except for Safari would allow access to the video files. Thanks to those who helped!
Try encoding to mp4 and replace this file instead m4v format, update your code and run.
Work's fine.