function playVideo() {
var thumbImg = document.querySelector('img');
thumbImg.style.display = 'none';
var starttime = 7; // start at 7 seconds
var endtime = 10; // stop at 17 seconds
var video = document.getElementById('yourVideoId');
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.pause();
}
}, false);
//suppose that video src has been already set properly
video.load();
video.play(); //must call this otherwise can't seek on some browsers, e.g. Firefox 4
try {
video.currentTime = starttime;
} catch (ex) {
//handle exceptions here
}
}
function showThumbnail() {
var thumbImg = document.querySelector('img');
thumbImg.style.display = 'inherit';
}
<video id="yourVideoId" width="240" height="320" onmouseover="playVideo()" onmouseout="showThumbnail()">
<source src="assets/video/sample.mp4" type="video/mp4">
</video>
<img src="assets/images/banner.png" width="240" height="320">
this the code i have written. when on hover the video plays, but on releasing the hover the video doesn't stop and on hover the video plays and stops at the last frame and doesn't show he thumbnail after ending.
Your code doesn't feature video.pause(); in the showThumbnail() function, which would effectively stop your video. You can furthermore add video.load(); in the aforementioned function to reset it to its initial state.
Related
I tried to achieve this in chrome by doing like this..
video::-webkit-media-controls-fullscreen-button {
display: none;
}
It is sometimes not working. I need a permanent solution for this very badly.
I am requesting the people:
This is not a duplicate question for any other in SO.
That solution is not working, test it if you want.
That's why I asked this again.
You can create you own control (you have to do the styling but I think that should not be a problem).
JSFiddle
Tutorial with explanations
The HTML5:
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
<source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
Download the video instead.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
<input type="range" id="seek-bar" value="0">
<button type="button" id="mute">Mute</button>
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
<button type="button" id="full-screen" disabled>Full-Screen</button>
</div>
</div>
And this as JavaScript.
$( document ).ready(function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
muteButton.innerHTML = "Unmute";
} else {
// Unmute the video
video.muted = false;
// Update the button text
muteButton.innerHTML = "Mute";
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
video.play();
});
// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
// Update the video volume
video.volume = volumeBar.value;
});
});
I'm trying to get the seek time while on video playing. I use the play event it is triggered only video start.
HTML:
<video controls id="videoFile">
<source src="Why Linux over Windows 3D Animation.mp4" id="video_here">
</video>
Javasript:
var secondvideo = document.getElementById('videoFile');
secondvideo.addEventListener('play', function(e) {
// The video is playing
console.log("current time= "+ document.getElementById('videoFile').currentTime);
});
secondvideo.addEventListener("timeupdate",
function (ev) {
console.log(ev.target.currentTime);
});
https://www.w3.org/TR/html5/embedded-content-0.html#handler-mediacontroller-ontimeupdate
Here you can find HTML5 Video Events and API: https://www.w3.org/2010/05/video/mediaevents.html
From MDN:
The HTMLMediaElement.currentTime property gives the current playback
time in seconds. Setting this value seeks the media to the new time.
Based on this information, you should do something like the following:
var secondvideo = document.getElementById('videoFile');
secondvideo.addEventListener('play', function(e) {
// The video is playing
console.log("Playing video");
console.log(secondvideo.currentTime);
});
secondvideo.addEventListener('pause', function(e) {
// The video is paused
console.log("Paused video");
console.log(secondvideo.currentTime);
});
secondvideo.addEventListener('seeking', function(e) {
// The user seeked a new timestamp in playback
console.log("Seeking in video");
console.log(secondvideo.currentTime);
});
Is there a way to play html video only for few seconds?
Currently when a user clicks on a table row the video seeks to a predefined time (highlighted below). So in the below example the video would seek to 7 seconds.
Is there a way to play the video from seconds onwards for just 10 seconds? i.e seek to 00:07 and play to 00:17 and stop?
Thanks
You can use timeupdate event along with currentTime attrribute
function playVideo() {
var starttime = 7; // start at 7 seconds
var endtime = 17; // stop at 17 seconds
var video = document.getElementById('yourVideoId');
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.pause();
}
}, false);
//suppose that video src has been already set properly
video.load();
video.play(); //must call this otherwise can't seek on some browsers, e.g. Firefox 4
try {
video.currentTime = starttime;
} catch (ex) {
//handle exceptions here
}
}
You could create a timer so after you "seek" the video, it will stop the video in 10 seconds.
so inside you seek function you would place.
var Video = $('Video Element')[0];
// After getting the video element play it.
Video.play();
// Now create a timer so in 10 second (1s = 1000 so 10s = 10000 ms) it will pause the video.
setTimeout(function(){
Video.pause();
},10000);
I made a small script which might help with this.
https://github.com/demux/jquery-video-cuepoints
Usage:
$(document).ready(function() {
var $v = $('#video');
$v.cuepoints({
17: function() {
$v[0].stop();
}
});
$('button').click(function(){
$v[0].play();
try {$v[0].currentTime = 7;} catch(e) {}
});
});
This might have been answered before but I have searched for hours and can't find anything without jquery on getting this to work and I don't really understand the bind method or how that works.
I just need my video to display a message once it is finished.
For some reason any time I try to use video.ended I get null back instead of true or false.
Also not sure why my setInterval is apparently wrong.
HTML:
<video id="videoAllUrBase" poster="images/all-ur-base-poster.png">
<source src="video/All Your Base Are Belong To Us.mp4" />
<source src="video/All Your Base Are Belong To Us.mp4.ogg" />
<source src="video/All Your Base Are Belong To Us.mp4.webm" />
<p>Your browsers does not support video</p>
</video>
<br></br>
<input id="playButton" type="button" onclick="playVideo();" value="Play" />
<input id="skipButton" type="button" onclick="skip(10);" value="Skip" />
<input id="rewButton" type="button" onclick="skip(-10);" value="Rewind" />
<p id="vidMessage">Click the Play button to start the video.</p>
JavaScript:
function playVideo(){
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
var button = document.getElementById('playButton');
if(video.paused){
video.play();
button.value = "Pause";
message.innerHTML = "The video is playing, click the Pause button to pause the video.";
} else {
video.pause();
button.value = "Play";
message.innerHTML = "The video is paused, click the Play button to resume the video.";
}
}
function checkEnd{
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
if(video.ended){
message.innerHTML = "The video has ended, click Play to restart the video.";
}
}
setInterval(checkEnd, 1000);
function skip(value) {
var video = document.getElementById("videoAllUrBase");
video.currentTime += value;
}
Instead of using setInterval to check for the video's status, listen for the ended event to know when it ends. Here's your code with the changes I'd use:
function playVideo() {
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
var button = document.getElementById('playButton');
if (video.paused) {
video.play();
button.value = "Pause";
message.innerHTML = "The video is playing, click the Pause button to pause the video.";
} else {
video.pause();
button.value = "Play";
message.innerHTML = "The video is paused, click the Play button to resume the video.";
}
video.onended = videoEnded;
}
function videoEnded() {
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
message.innerHTML = "The video has ended, click Play to restart the video.";
}
function skip(value) {
var video = document.getElementById("videoAllUrBase");
video.currentTime += value;
}
While it probably wouldn't affect your setup, it could be more useful to use addEventListener to bind the event.
References:
https://developer.mozilla.org/en-US/docs/DOM/Media_events
https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener
what I'm trying to do is have 4 videos play in sequential order automatically. When one ends, the next begins, until the last video. What I have so far works as intended in every browser except Safari. In safari, it loads the first video (00.mp4), successfully switches to the second video (01.mp4), and that's it, no more. Here's what I got, I'm sort of figuring this stuff out as I go so sorry if my code is terrible and inefficient.
This is my javascript:
function load() {
var video = document.getElementsByTagName('video')[0];
if (video.canPlayType("video/ogg")) {
video.src='00.ogg';
video.addEventListener('ended', function() {
video.src='01.ogg';
video.load();
video.removeEventListener('ended', arguments.callee, false);
video.addEventListener('ended', function() {
video.removeEventListener('ended', arguments.callee, false);
video.src='02.ogg';
video.load();
video.addEventListener('ended', function() {
video.removeEventListener('ended', arguments.callee, false);
video.src='08.ogg';
video.load();
}, false);
}, false);
}, false);
}
else if (video.canPlayType("video/mp4")) {
video.src='00.mp4';
video.addEventListener('ended', function() {
video.src='01.mp4';
video.load();
video.addEventListener('ended', function() {
video.src='02.mp4';
video.load();
video.addEventListener('ended', function() {
video.src='08.mp4';
video.load();
}, false);
}, false);
}, false);
}
else {
window.alert("Blah blah placeholder blah");
}
}
and this is the relevant HTML:
<body onLoad="load()">
<video id="vid" autoplay width="416" height="240" src=""></video>
Any corrections for what I assume is awful coding is also appreciated, thanks.
Same exact issue. I noticed that if you use the controls to jump to another place in the video, Safari correctly loads the next video fine
<video autoplay=true width=100% height=100% controls="controls" id=theVideo onended="end(this)" style=position:absolute;top:0px;left:0px >
<source src="Opening.m4v" type="video/mp4" />
Your browser does not support the video tag.
</video>
<script>
function end(inVideoEnded)
{
var video = document.getElementById("theVideo");
if (playstate == 0) {
video.src = "Choice1-H.264 for iPod video and iPhone 640x480.m4v";
playstate=1;
} else if (playstate == 1) {
video.src = "Choice1_A-H.264 for iPod video and iPhone 640x480.m4v";
playstate=2;
} else if (playstate == 2) {
video.src = "Choice1_B-H.264 for iPod video and iPhone 640x480.m4v";
playstate=3;
} else if (playstate == 3) {
video.src = "Choice1_C-H.264 for iPod video and iPhone 640x480.m4v";
playstate=4;
}
video.load();
video.play();
video.onended = function(e) {
end(e);
}
}
</script>
</code>
I added the setTimeout line. This jumps it back to start after 100 milliseconds and that was enough time for my Safari to consider it enough to play a second video. 50 milliseconds was too short. Try adding a line like that right after your video.load
video.load();
video.play();
setTimeout("document.getElementById('theVideo').currentTime = 0;",100);
video.onended = function(e) {
end(e);
}
}