I'm building a website that has videos embedded within them. This website needs to cater for iPad users as well but I'm having trouble with the ol' video tag at the moment. I have a video that plays fine in browsers but not on an iPad unfortunately.
I'm just getting a black screen with the iPad, and no error message to speak of.
Here is my code for the video:
<video id="movie" width="790" height="250" controls >
<source src="anim/intro.ipad.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="anim/intro.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="anim/intro.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>
The videos were all created following tutorials about HTML5 video. They were all encoded using preferred iPad settings on Miro Video converter.
Just incase this matters (I'm not sure it will) I'm testing the video on an iPad simulator.
No matter what I do, I just can't get the video to play:
Are you sure you got the encoding right?
Try this to test it:
<video src="anim/intro.ipad.mp4" controls>
Your browser does not support the video element.
</video>
is your .htaccess file serving up the particular video files correctly?
Ensure your server is using the correct mime-types. Firefox will not play the Ogg video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Reference:
Video for Everybody
Also, are you modifying the video element by using positioning? I've found that this creates this black video screen too.
Related
Because of firefox not playing my mp4, I made ogg files as remplacement. but it doesn't work as wanted because now, obviously, every other browser play .ogg by default
<video class='vid-bg' muted loop playsinline autoplay>
<source src='src/tata.ogg' poster='src/palm_bg.jpg' type='video/ogg'>
<source src='src/tata.mp4' poster='src/palm_bg.jpg' type='video/mp4'>
</video>
but the quality and the size of mp4 is better. So I inverted the ogg source tag and the mp4 one, but then firefox show blank content and stick on trying to load/read the mp4
I would like to say that if the browser can't read/load an mp4, it plays the ogg instead
(every chrome and edge and ie9+ reads my mp4 with no problems)
I am trying to redirect to a different URL when html5 video's not supporting. Actually HTML5 video are not playing in safari browser. So I want to redirect my page to home.html instead of index.html. Any help or direction My browser giving message Your browser does not support HTML5 video. Here is my code, any help will be appreciated.
index.html
<video id="myVideo" autoplay preload controls >
<source src="final.mp4" type="video/mp4">
<source src="final.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="final.webm" type="video/webm; codecs=vp8, vorbis">
Your browser does not support HTML5 video.
</video>
You can check if the video element is supported in JavaScript, and then redirect if it isn't supported:
if (!document.createElement('video').canPlayType) {
window.location.replace('home.html');
}
I want to play a video after another video so I use this code
<video id="example_video_1" autoplay controls="none" width="640" height="300" poster="vlcsnap-2015-01-10-20h41m11s114.png" onended="run()">
<source src="intro.mp4" type='video/mp4' />
<source src="intro.webm" type='video/webm' />
<source src="intro.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
<script>
videoPlayer = document.getElementById("example_video_1");
function run(){
var nextVideo = "video2.mp4";
videoPlayer.src = nextVideo;
videoPlayer.play=autoplay;
videoPlayer.controls=controls;
};
</script>
This works fine in chrome but when i play this in firefox the 2nd video (video2.mp4) dose not play, as firefox dose not support mp4 format. So is there any process to set the second video in mp4, webm and ogg file format so that most of browsers can play the video.
Your last source <source src="intro.ogv" type='video/ogg' /> Is wrong. You wrote two different formats .ogg is for audio. And you need to establish a folder name that the file is in. With this you need to have the HTML5/CSS3 file right next to the folder in a separate folder. This is the correct code:
<source src="foldername/intro.ogv" type='video/ogv' />
Other than that your code is in great shape.
***I do not know anything about your script because I know nothing about JavaScript, or JQuery. Hopefully this was useful! Sorry :(
I'm running into a very specific issue with in Chrome / Desktop Safari.
The video doesn't load at all when I inject it onto the page using JavaScript. It's not a markup issue, nor is it a MIME type issue, since I can confirm the video is loading when it's a static element on the page (I'm loading this video with Ajax).
It seems to have to do with the filesize, since it works just fine with a smaller video in all browsers. It only occurs when I'm trying to stream a much larger video.
The approach works completely fine in Firefox / IE9, just not in Chrome / Desktop Safari.
Here's the markup I'm using, and I can confirm the correct MIME type declarations are in my .htaccess.
<video autoplay controls class="main-video">
<source src="/videos/Miranda.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/videos/Miranda.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="/videos/Miranda.ogv" type='video/ogg; codecs="theora, vorbis"' />
<p>
Sorry, there was a problem playing this video
</p>
</video>
The HTML5 media player of SMF Framework has just a few media codecs like ogg vorbis, and mp4, so is there any way to play a media file of say, flv format or mkv or mp3 format?
And also, is there any way with which we can play local media files if the above case is satisfied?
Because of the browser support of video codecs in HTML5 Video, you can use only a few codecs in those. Also not all browsers support all video codecs. So you have to provide one H264 video in the mp4 Container (IE, Safari, Chrome) and a Ogg Theora video. You can transcode your Videos with a lot of free desktop tools like this one. You have to provide the different files like that:
<video id="myVideo" class="pf-video" width="480" height="320" controls="controls" poster="../media/bigbuck.png">
<source src="../media/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="../media/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
Hope I could help you.