I am trying to play mp4 video using html5 video tag. But in FF 3.6 its just showing a black window with cross sign. Its playing in Chrome.
I can play that video in windows media player (i.e. the required codec are installed)
How can i play that video in FF too?
<video id="video1" width="200" height="200" controls="true">
<source src="video1.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' />
Your browser does not support mp4 videos
</video>
firefox does not support most MPEG4 natively due to licencing. you can save your video in a few different types and use canPlayType(type) method.
more here:
http://wiki.whatwg.org/wiki/Video_type_parameters
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-navigator-canplaytype
For Firefox, you'll have to encode the video as Theora and save as an .ogv file.
http://diveintohtml5.info/video.html#what-works
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):
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 want to play rtmp in WeChat and it can play on my PC browser, but in WeChat browser on Android, it returns:
"No compatible source was found for this video"
But on iPhone it just shows an infinite loading screen.
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://www.pageresource.com/wallpapers/wallpaper/bleach-ichigo-mugetsu-here-size-original_215405.jpg"
data-setup="{}">
<source src="rtmp://hsn.mpl.miisolutions.net/hsn-live01/mp4:420p500kB31" type='rtmp/mp4'>
<!--source src="rtmp://219.232.161.204/livestream/mtzysunq" type='rtmp/mp4' / -->
<!--<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>--><!-- Tracks need an ending tag thanks to IE9 -->
<!--<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>--><!-- Tracks need an ending tag thanks to IE9 -->
</video>
No browser supports rtmp without flash. videojs uses a flash fallback for rtmp (video-js.swf). Mobile devices do not support flash, hence no flash fall back, hence no video. You need to use a format other than rtmp. Like mp4, hls or dash.
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.