I have a video tag thats for playing a mov file, its working in Safari but not on chrome, what I need to set to make it playable in chrome too?
<video class="vp" width="480" height="320" controls="controls">
<source src="One.mov" type="video/mp4">
<source src="One.mov" type="video/ogg">
Your browser does not support the video tag.
</video>
As mentioned by Harshith you're probably using a file type which the browser doesn't support.
Use a range of file types to ensure maximum compatibility, I see you are using 2 source tags in the example but only 1 file type.
I would recommend using Ogg & H.264 as these should cover the main browsers (excepting older versions) and then any additional file types as required depending on the browsers used by your audience.
Also, you may want to consider adding the old embed method for browsers which don't support HTML5 such as IE8 and lower. If you nest the 2 methods as below the browser will use the embed option only if it does not support HTML5.
<video>
<source src="#" type="#" />
<source src="#" type="#" />
<source src="#" type="#" />
<object data="#">
<embed src="#">
</embed>
</object>
</video>
Or you could just use YouTube...
Related
I'm working on Vue (Laravel) I need to set a different file depending on the browser. I have 2 different video files and a GIF file and I need to set them for different Browsers.
This is my code for the videos (to set only for Chrome and Mozilla):
<video class="img-fluid" width="500px" height="438px" autoplay muted playsinline>
<source src="/image/animation.mp4" type="video/mp4">
<source src="/image/animation.webm" type="video/webm">
</video>
This is my code for the gif (to set only for Safari):
<img height="500px" width="438px" class="img-fluid" src="/image/animation.gif">
Any idea?
It may seem a dumb question but I cannot figure out a solution, I am embedding a local video using the standard html5 video syntax, the problem is that on safari / ios the video won't play and a quicktime striketrhough icon appears instead.
The same error appears on w3c page if I try to playback a video using iphone / ios (testing on xcode):
https://www.w3schools.com/html/html5_video.asp
How can I fix this problem?
This is the code I am using:
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Thanks.
I've been testing a web app and for some reason lots of the audio that should play onLoad fails to play in many cases. Is there a better strategy to ensure audio plays on all devises/ browsers?
Here is my code:
$( document ).ready(function() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.currentTime = 0
}
});
HTML:
<audio id="audio1" src="https://LINK.wav" ></audio>
(Edited based on comment feedback -thanks!)
Wave files are uncompressed audio and tend to be really large files that need to be downloaded. This is why Mp3, Ogg, or AAC are preferred as web formats. Not all browsers support each one though. Firefox doesn't support AAC, and IE and Safari don't support Ogg. You can use caniuse to check.
HTML5 audio would be set up like:
<audio controls preload>
<source src="https://LINK.m4a" type="audio/mp4" />
<source src="https://LINK.oga" type="audio/ogg" />
</audio>
Information from this article on HTML5 audio types.
You have to include the file type, like
<audio id="audio1" src="your_filepath/LINK.wav" type="audio/wav"></audio>
But if you only supply a WAV file, some browsers won't be able to play it (like IE)
It's more reliable to supply mp3 and ogg files, like this:
<audio>
<source src="LINK.ogg" type="audio/ogg">
<source src="LINK.mp3" type="audio/mpeg">
</audio>
At least one of these two is understood by every browser, and the (compressed) files are much smaller, so it won't take that long until they load and start to play.
Before adding popcorn.js, the video run great on Firefox and Chrome. Now I add popcorn.js for subtitles purpose, it work on Firefox but it does not work on Chrome(video is blank white with unclickable video control). I already have alternate video sources in HTML,
<video id="video" width="620" height="420" controls="true" preload="none">
<source src="caption.ogg" type='video/ogg; codecs="theora, vorbis"' />
<source src="caption.webm" type='video/webm; codecs="vp8.0, vorbis"' />
<source src="caption.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2, H.264"' />
Your browser does not support HTML5 video
</video>
Anyone tell me what wrong with it? My suspect is that popcorn.js only work on Firefox?
popcorn.js only work on Firefox?
False
Popcorn.js works great on Chrome.
Please validate the following:
You're using a recent version of Chrome.
The computer you're using is healthy (no viruses, no garbage etc...)
Either post the JS you wrote or go through it line by line, checking for any errors.
(should be 1 actually) Did you check the chrome dev tools console for any errors?
I've got some trouble with the <video> element I guess. I have a little demo page where I'm running a video. That file is available in .webm, .mp4 and .ogv. The video is played properly in Firefox (10) mac+win, Safari mac, Chrome mac.
Neither the windows version of Safari nor Chrome plays/shows that video file (maybe a Webkit issue?). This is how the HTML code looks:
<video controls>
<source src="video/chicane.webm" type='video/webm; codecs="vp8, vorbis"'/>
<source src="video/chicane.mp4" type="video/mp4"/>
<source src="video/chicane.ogv" type="video/ogv"/>
</video>
I'm also using a .htaccess file to normalize MIME types, looks like
# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
Having a look into Chromes or Safaris developer tools (network tab), it looks like it chooses to play the .webm file, but it can't figure the mime type (shows undefined), plus it seems like it trys to access the files twice.
Have a look yourself:
http://www.typeofnan.com ("awesome tab")
I have no clue why it works fine on OSX with both browsers, if someone can spot an error on the site please let me know. At present, I do some feature detection and use Javascript to .play() the video. However, if I use the autoplay attribute on the <video> tag, Chrome at least plays the audio, but still no video at all.
Reference: Site source on github
Here's what I did to get it to work. Since the browser accepts the first video it can play, I put the WEBM version first and Chrome has no problem with it.
Have you tried to add codecs additional info into each <source> ?
Maybe WebKit cannot automatically recognize codec used to encode the video source.
// from html5rocks.com, see link on the bottom of answer
<video>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
http://www.html5rocks.com/en/tutorials/video/basics/#toc-markup
It works on my machine : Windows 7 Family + Chrome 16.
What I did is that I opened the Developer Tools.
Then, I added the autoplay="autoplay" to the video tag. Next, I edited the html source tag related to the webm format so that I could have :
<source src="video/chicane.webm" type="video/webm; codecs=\" vp8, vorbis\"">
Maybe it was simply an escape problem (with the double quotes).
I wrote this markup from scratch using your video URLs, and it seems to work fine:
<video controls width="360" height="360">
<source src="http://www.typeofnan.com/video/chicane.mp4" type="video/mp4">
<source src="http://www.typeofnan.com/video/chicane.webm" type="video/webm">
<source src="http://www.typeofnan.com/video/chicane.ogv" type="video/ogg">
<span title="No video playback capabilities, please download the video below">Your video</span>
</video>
<p>
<strong>Download video:</strong> MP4 format | Ogg format | WebM format
</p>
See Video for Everybody.