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.
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 have a page with this html :
<audio controls="controls">
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/aac" />
</audio>
It works on Firefox and Edge but it doesn't on IE11. My windows version is up to date and I saw it should be supported. I tried to change my settings to be sure ActiveX is enabled and it is.
I also tried with :
<audio controls="controls" src="http://techslides.com/demos/samples/sample.aac">
It doesn't works too.
What can I do?
I tested the sample code with IE 11 browser and I am able to produce the issue.
I try to check the documentation and found this information.
Beginning with Windows Internet Explorer 9, any audio or video content
needs the correct mime type set on the server, or the files won't
play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video.
WebM audio and video files can be supported by installing the WebM
components from The WebM project. The following table shows the
required settings for your web server to host these files correctly.
Microsoft Edge updates introduced WAV support.
Reference:
audio element | audio object
you can see that .AAC format is not in the list but sites like MDN and CANIUSE shows that it is supported.
I also tried with audio type mp4 which also did not worked.
<audio controls="controls">
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/mp4" />
</audio>
It also can be possible that it is some kind of bug with IE browser or issue is related with H.264 format.
As a work around, I suggest you to use mp3 file format which is working fine with IE 11.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<audio controls="controls">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg3" />
</audio>
</body>
</html>
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 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
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.