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 :(
Related
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>
when I use this, I can't hear sound.
I can see issue for .mkv format video.
.mp4 format is fine.
who can help me about this issue?
I currently want to default the source of the video player to use the webm format. From my understanding of the video player, browsers play the first recognizable format they come across so I have the webm as the first source but it still uses the mp4 format. Is there a way to set a default source for the browser?
<video controls>
<source src="videofile.webm" />
<source src="videofile.mp4" />
<source src="videofile.ogv" />
</video>
I don't understand, I have a project with Angular2 and in my home component, I try to display a video with html5. The problem is that sometimes, on some videos, the tag doesn't play sound:
<div class="video-gallery">
<video id="video" controls preload="auto" width="640" height="420" poster="assets/imgs/video_logo.png" >
<source src="assets/videos/{{videos[0].name + videos[0].extension}}" type="video/mp4" />
</video>
</div>
When I say 'on some videos' I mean it's not up to the extension, some videos are mp4 and play sound and others (mp4) don't. Same thing for mkv for example. I only get the video but no sound. What could be the problem ? I work with Chrome's last version so I don't think it's from chrome because it is supposed to support video and sound of html5 . Can it be from the video tag ?
Thanks
I'm facing the problem that a video does not start to play, which I added to an HTML5 page:
<video id="videobcg" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0" poster="http://test.com/poster.jpg">
<source src="http://test.com/texas.mp4" type="video/mp4">
<source src="http://test.com/texas.webm" type="video/webm">
<img src="http://test.com/texas.jpg" />
</video>
In Chrome and Firefox it works fine; the video starts in one second.
In Internet Explorer I have to wait some time for video to start.
In Safari it does not start at all.
How to fix it?
Sometimes, with MP4 files, the information regarding the length etc. of the file is at the end rather than the start of the file, so some browsers need to download the entire thing to get this information in order to play the file.
Try running QTIndexSwapper 2 on the file which will move the required information to the start of the file, if it needs to be.
It's worth a try.
I'm building a lightbox and have reached adding support for flash and videos. I've never had any demands or need for video, so honestly don't know where to begin. I do know I have to be able to serve different video formats for different browsers, but don't know how to approach this. I'm also hoping to have this work in "non-modern" browsers. The tutorials and questions I've found are very vague any typically result in "try using this plugin". Perhaps someone could help by explaining how i would go about loading a video that would be browser compatible, and possibly the video formats i should be supporting? Or a link :) thanks!
I just did the same thing. I used a combination of Fancybox and Video for Everybody.
Basically, the idea behind Video for Everybody is that you use the HTML5 video tag with an embedded flash video player for browsers that do not support HTML5 video. For the embedded flash player, I used JWPlayer.
And then you just make something like Play Video and point Fancybox at the link. Voila, you've got a video in an Fancybox (which is about the same thing as Lightbox).
For cross-browser compatibility, you should offer the file in MP4 (using H.264 codec) and WebM or Ogg. Older browsers that do not support HTML5 videos will use the flash player fallback with the MP4 file anyways.
One thing to keep in mind with your MP4 file is that often the moov atom is placed at the end of the file, so the file cannot start playing until it has fully downloaded. Use a tool like qt-faststart to move it to the beginning of the file, allowing it to start playing before fully downloaded.
Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.video_link").fancybox();
});
</script>
</head>
<body>
Play video
<video width="640" height="360" controls id="videoPlayer">
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>
</video>
</body>
</html>