I have a video file in MKV format, i want to play that file in the browser without converting, how can i play this file format in browser?
<video width="320" height="240" controls>
<source src="movie.mkv" type="video/mkv">
Your browser does not support the video tag.
</video>
i want this file to be played in full screen mode always. My browser is chrome.
It will refuse to play Matroska if the type attribute is set to video/x-matroska. Try removing the type attribute completely.
After some experimentation with this issue, I've found the best solution is to set the mime type to video/webm.
I think Chrome doesn't play .mkv videos.
By the way, 'type' is mime-type, and mkv's mime type is video/x-matroska.
Try:
source src="movie.mkv" type="video/x-matroska"
If this works, maybe the sound will be muted, so you can try type="video/mp4".
I added the IIS Mime Type as (.mkv - video/webm) over the IIS option and it worked fine.
If you want to use video with path .mkv
<!-- mkv -->
<video width="320" height="240" controls src="assets/animation.mkv"></video>
<!-- mp4 -->
<video width="320" height="240" controls>
<source src="assets/animation.mp4" type="video/mp4" />
</video>
if you do not understand, click on link
Play Code
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 must start by saying I'm a newbie to html. I start from scratch and I try to do it the right way.
I've got a lot of help from stack overflow and most of my problems were solved by other's requests for help. But I don't seem to get an answer to a simple problem I got.
I've checked several answers to this problem, but none of it works for me.
MY PROBLEM: my videos only plays on Safari and at no other browser.
The most relevant post was the following: HTML5 video won't play in Chrome only
I tried the correct order and re-converting my files to mp4, ogg and webm using Miro converter but both didn't work. I added the codecs in to my code but this doesn't change anything. I added plays-inline as well from another relevant post but nothing...
My code is the following:
<!-- LANDING PAGE VIDEO - INTRO VIDEO -->
<video class="videoIntro" id="SiteIntro" autoplay="no-repeat" poster="VMF_MENU.png" plays-inline>
<source src="videos/Site_Intro.mp4" type="video/mp4">
<source src="videos/Site_Intro.webm" type="video/webm" codecs="vp8, vorbis">
<source src="videos/Site_Intro.m4v" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
<source src="videos/Site_Intro.ogv" type="video/ogg" codecs="theora, vorbis">
</video>
I got no error messages (expected).
What do you suggest I try to correct this?
Thank you in advance!
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.
Here is the code I am using for the audio:
<audio controls preload="none" class="voice-audio">
<source class="voice-audio-source" src="<path to content>")" type="audio/mpeg" />
<p>Your browser does not support HTML5 audio.</p>
</audio>
The audio will not load at all on Safari for Mavericks. Has anyone successfully done this?
Using jPlayer in the hopes of resolving.
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.