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.
Related
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):
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'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