I've developed on Jquery API for HTML5 Vido. It works fine except a single issue.
Task: Have to show poster image on the end of a video.
Code I've used:
$hdVideo.bind('ended', function() {
$hd_play_btn.removeClass('hd-paused-button');
$(".hd-video-main-control").removeClass('hd-video-main-control-none');
$hdVideo.load();
});
Issues: It shows poster on the end of the video. But unfortunatly the second video source starts when play the video again in chrome 13.0.
My HTML code is:
<video width="630" height="354" class="hd-flv-player" poster="asserts/poster.png" controls="controls" data-name="demo video" data-uid="57fb2708">
<source src="http://hdflvplayer.net/hdflvplayer/videos/Casion-Royale-Chase.mp4" data-quality="hd"/>
<source src="http://static.clipcanvas.com/sample/clipcanvas_14348_offline.mp4" data-quality="sd"/>
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" data-quality="hd"/>
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" data-quality="sd"/>
</video>
JQuery Plugin call code:
$(function(){
var $hdVid = jQuery.noConflict();
$hdVid(function(){
$hdVid('.hd-flv-player').hdVideo();
});
});
Please let me know how to fix my bug.
Related
I need to show multiple instances of a video tag on one page. I'm trying to find a way to read video buffers and use MediaStream to append the buffers to another video tag. But it seems there is no such an api in video tag.
Is there any way to do this? please let me know if you know any solutions.
NOTE: I don't want to use canvas to put image data on it because of performance issues in safari.
"I need to show multiple instances of a video tag on one page...
But it seems there is no such an api in video tag."
You can try using the CaptureStream API (intro). You can also check options in the documentation.
CaptureStream should not care if your video input is a media file or some appended buffers.
Note: In these stream copies...
autoplay is needed for auto-displaying pixels,
muted avoids hearing multiple audios.
This code is tested as working in Chrome (Windows), so let's hope it works in Safari (Apple) too:
<!DOCTYPE html>
<html>
<body>
<video id="vid_01" width="320" height="240" controls>
<source src="myfile.mp4" type="video/mp4">
</video>
<video id="vid_02" width="320" height="240" muted autoplay>
</video>
<video id="vid_03" width="320" height="240" muted autoplay>
</video>
<script>
var streamCopy;
var vid1 = document.getElementById('vid_01');
var vid2 = document.getElementById('vid_02');
var vid3 = document.getElementById('vid_03');
//# check if video is ready to be copied...
vid1.addEventListener("loadeddata", copyVidStream );
function copyVidStream ()
{
if (vid1.readyState >= 3 ) //if ready then copy stream
{
streamCopy = vid1.captureStream();
vid2.srcObject = streamCopy;
vid3.srcObject = streamCopy;
}
}
</script>
</body>
</html>
I have an embedded video on my site and am currently using the following code. I don't want the video to loop but it gives a black screen once the video is done playing. I know there is the poster option under the video tag but it only displays the thumbnail at the start of the video and not after it has finished playing.
Could you all help me out as to how should I add the thumbnail after the video is done playing?
<video controls autoplay poster="some_path">
<source src="some_video.mp4" type="video/mp4">
</video>
I see two ways to solve your issue.
This one will set your current frame to position 0 (the very first frame) after the video will end. You can set any frame you like. This solution is recommended.
<video controls id="myVideo" poster="test.jpg">
<source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
myVideo.currentTime = 0;
};
</script>
The next one will reload the video source, so the poster will appear again. According to specification of poster in video it will be displayed only until the video starts once. After that, the only way to get the poster again - reload the video src, and a poster, just to make sure. Will work a little bit more stable.
<video controls id="myVideo" poster="test.jpg">
<source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
myVideo.poster = "test.jpg"
myVideo.src = "test.mp4"
};
</script>
I'm still not really 'good' with Javascript and jQuery but I'm learning. The following, however, puzzles me:
I have a standard HTML5 video tag:
<video id="videoclip">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Now I need to change to video src via jQuery. If I only have ONE source i.e.
<source id="mp4" src="video.mp4" type="video/mp4">
I just do THIS:
function changeVideo() {
var newVideo = "new_video.mp4";
$("#videoclip").attr("src",newVideo) }
(I abbreviated this snippet. I actually have quite a few variables and things that happen set up there).
So this works well. But what do I need to do if I have TWO sources as in the very first code segment? An alternative webm file?
I tried giving the two source tags different IDs like so:
<source id="mp4" src="video.mp4" type="video/mp4">
<source id="webm" src="video.webm" type="video/webm">
and then did this:
function changeVideo() {
var newVideo = "new_video.mp4";
var newVideo2 = "new_video.webm";
$("#mp4").attr("src",newVideo);
$("#webm").attr("src",newVideo2)
Doesn't work. I mean it DOES the first time I play the video but when I use another similar function to change the sources yet again it won't work. It will be the same source set in the first place. It won't budge. :(
Everything I wrote over the last hours works perfectly now with this exception.
How do I get past this exception?
You need to add this in the changeVideo function:
$("#videoclip")[0].load();
$("#videoclip")[0].play();
Basically what I'm trying to do is make the video redirect to a different web page after it's finished playing (very similar to what YouTube uses for Playlists). I've tried doing a bit of research before asking this type of question but nothing seems to be working out for me.
Here's the code:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
Since it looks like you're using Video.JS for this, you should have a look at their docs:
https://github.com/videojs/video.js/blob/master/docs/index.md
Specifically, the API section:
https://github.com/videojs/video.js/blob/master/docs/api.md
In the "Events" section, it says:
ended
Fired when the end of the media resource is reached. currentTime == duration
So you'd need to get a reference to your player (also on that page):
var myPlayer = videojs("example_video_1");
and then listen for the ended event, and redirect from there:
function endedFunction(){
window.location = 'http://www.example.com/';
}
myPlayer.on("eventName", endedFunction);
As borrowed from this answer, try the following. And you don't need video.js for this.
HTML
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
JavaScript
<script>
var video = document.getElementsByClassName("video-js");
// Or select element by HTML tag
// var video = document.getElementsByTagName('video')[0];
video.onended = function() {
window.location.href = "www.yoururl.com";
}
</script>
Ought to work.
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me