I'm trying to play a HTML5 video in safari on my local server but currently it isn't working properly. Here's the issue:
I have the code:
<video width="580" height="340" controls>
<source src="media/video/test.mp4" type="video/mp4">
<source src="media/video/test.m4v" type="video/mp4">
<source src="media/video/test.ogv" type="video/ogv">
<source src="media/video/test.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
It simply says 'Your browser does not support the video tag.' when I view it on my local server through Safari. I made sure to add the mp4 etc MIME types in IIS and restarted including the WWW service.
The video plays fine when I view it via direct path in Safari and it works playing it within Chrome from the HTML.
Any ideas? Cheers!
Update
I didn't have Quicktime installed on my machine. Once installed, the HTML5 video played.
The version of safari you are using probably doesnt support the new html5 video tag,
you could try using a different type of player (shockwave youtube etc) to extend your browser support
I didn't have Quicktime installed on my machine. Once installed, the HTML5 video played.
Related
I am trying to display a video on a webpage.
I tested it locally and it works fine. However, when I put it in my webpage's repository (on a different computer) and access it through the internet, the video does not appear.
I included an mp4 and an ogg as source files, and tested it on both Firefox and Chrome, but neither work. I am sure the video path is correct.
Any thoughts?
<video width="205", controls>
<source src="movies/video1.mp4" type="video/mp4">
<source src="movies/video1.ogv" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Solved!
Videos did not have read access.
I have an HTML page that contains a MP4 video:
<html>
<body>
<video width="800" height="600" controls>
<source src="/static/xyz.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
When I load the page in Firefox, it doesn't show the play control buttons but shows error message "No video with supported format and MIME type found" (see the screenshot below).
So I use this site to test my browser's ability to play HTML5 mp4 video and it can successfully play the test video on that site. My Firefox version is v36 on CentOS Linux. I also tried using Chrome and it can't play it either. I also tried it on Firefox/Chrome on Windows but failed. I then use the Firefox debugger to look at the debug info and I see the following message:
Media resource http://localhost:5000/static/xyz.mp4 could not be decoded.
All candidate resources failed to load. Media load paused.
I then tried playing the xyz.mp4 video on my local machine using Linux's movie player and it plays fine and it also plays fine in Window's media player. But when I use the above HTML5 <video> tag, it doesn't play for all browsers in both Linux and Windows. I also followed Mozilla's online forum to change the browser settings and clear caches but none of them works. So what caused the problem of this simple HTML5 ?
This is very likely the problem with your video file. mp4 is not really a format, but a container that can hold video in different formats. Firefox supports only H.264 encoded video.
Simply speaking, there are several types of mp4 files and not all of them are supported by browser. To verify this, you can download one of the videos from the quicksmode website and replace your video with it.
Possible solution:
//autoplay muted onloadedmetadata="this.muted = true"
<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
<source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
Your browser does not support the video tag.
</video>
I have a website built with bootstrap and loading video in a dialog:
<video width="760" style="background-color: white;" preload controls autoplay>
<source src="....." type="video/mp4" />
</video>
Shows and works fine in IE, Chrome and Safari.
In Firefox auto play worked a few times, and now does not work at all.
No errors in console and video plays just fine manually using controls.
I have also tried script approach (without autoplay attribute):
oncanplay="$(this)[0].play()"
And works flawlessly on all browsers except Firefox.
Can anyone see what could be wrong?
I have tested this on all browser its working perfect with javascript event
<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.mp4.webm" type="video/webm" />
<source src="video.mp4.ogg" type="video/ogg" />
Your browser does not support the video tag or the file format of this video.
</video>
The problem has an easy solution: changing the order of the videos, listing first the .mp4 source and next the .webm source made the auto-play videos run on Firefox, Explorer and Chrome, this of course is valid if you have multiple video sources.
A side note: Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed. Partial support for Firefox refers to the lack of support in OSX & some Linux platforms, for Android Firefox it refers to the inability of hardware acceleration.
This worked for me for the firefox browser, but it have to be muted.
<video
width="100%"
height="100%"
onloadedmetadata="this.muted = true"
autoplay
>
<source src="assets/videos/Helpline_Video.mp4" type="video/mp4" />
</video>
First check your web page here for test
http://html5test.com/
Second inspect via code inspector and enter them in the browser to check if the are working fine or not. Or drag and drop video file over the browser to check if its working or not.
Thirdly try checking MIME Types
AddType video/mp4 for .mp4 .m4v
AddType video/ogg for .ogv
AddType video/webm for .webm
Fourthly check you html5 converter it has often problem with format conversion I had same problem year back when I was working html5 video. Changing it fixed the issue for me.
Last but not the least; Add a flash fall-back!
<object type="application/x-shockwave-flash"
data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"
height="227" width="220">
Firefox Video Issue: Troubleshooting
Make sure that the server sends the video files with a correct and supported MIME type to make it work in Firefox.
link
Use source URL relative to ROOT, not Web page
Eg: src="/complete/folder/path/video.ogv"
Version of mozilla.
Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.
Firefox 4 supports WebM.
link
From Firefox 66 and aboew, you must click the unblock button on the right of browser bar to unblock Autoplay Video and Audio
I am trying to make a video streaming site and I want to use VLC to play my video. However, I want other people who doesn't have VLC to be able to view my videos through a VLC plugin. Is it possible? I want to use VLC because it can play anything.
The viewer has to have VLC and the Browser Plugin Installed on there pc, depending on the file format of the video you could use the HTML5 Video tag.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
Update your browser.
</video>
This will only work if the viewer has a html5 ready browser meaning old versions of IE wont be able to see the video but the code will tell them that they have to update there browser
You might want to checkout the current beta of http://www.projekktor.com - it's a generic HTML 5 player, which uses whatever backend is available on the user's PC. Since recently, it also supports VLC: https://twitter.com/projekktor/status/354187957571297281
I am trying to play video on chrome using video tag (html5) this video is uploaded on wowza media server and its run on only mac in safari, it does'nt play on windows and even on chrome on mac, what can i do for playing video on chrome on windows , my code is
<video controls="controls" width="480" height="320">
<source src="http://184.72.239.149/vod/mp4:GettingStarted.mov/playlist.m3u8" />
</video>
i dont want to use flash to play video.
You'll have to use a different format for other browsers that don't support HLS. I have not seen this work with Wowza and browsers' video tag, but there is an example using JwPlayer - http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/single_mp4.html. Note that this does fall back to flash for Firefox and Opera.