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):
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 have a couple of videos uploaded to Hostgator (my hosting service), and I'm displaying them on a page with the HTML5 video player. The video is there (I know because I can hear the audio,) but in Chrome all I see is a black screen, and in Firefox it won't play at all, just says "No video with supported format and MIME type found."
The video files are both ones I had to convert from a .mov to a .mp4. But they are all mp4 files.
When I download the videos again from Hostgator, they are normal, so I don't think anything is wrong strictly with the files themselves.
What could be going wrong here? Thank in advance.
I suppose the issue is in wrong codec. It should be h.264 for MP4 file.
Source with instruction http://www.freemake.com/how_to/how_to_create_and_embed_html5_video
Web video is complicated, most browsers support different video formats (codecs). To be compatible with all browsers you need every video in 3 different file formats: MP4, OGG, WEBM.
For maximum compatibility, here’s what your video workflow will look
like:
Make one version that uses WebM (VP8 + Vorbis).
Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
Make another version that uses Theora video and Vorbis audio in an Ogg container.
Link to all three video files from a single element, and fall back to a Flash-based video player.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
Source: http://diveintohtml5.info/video.html#what-works
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.
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