This question already has answers here:
play pause html5 video javascript
(8 answers)
Closed 10 months ago.
Here is my video code:
<video id="select-plan-vid" autoplay="" controlslist="nodownload" src="myvideo.mp4"></video>
The controls are hidden (correct), BUT I would still like users to be able to pause/play the video by clicking on it (or by pressing space bar, as I'm used to that method personally). I don't like that users can't pause it if they want to do so.
EDIT:
I have attempted Zayadur's answer; here is my javascript (put in the header of my page):
<script>
window.onload = function () {
var clickPlay = document.getElementById("select-plan-vid");
clickPlay.addEventListener("click", function () {
if (video.paused == true) {
video.play();
} else {
video.pause();
}
});
}
</script>
(Currently not working)
You can add a click listener and play / pause using javascript.
Check this answer for reference: https://stackoverflow.com/a/18855793/11578154
You can use JS to accomplish this.
This function targets id="video" and adds an event listener that tracks clicks.
window.onload = function () {
var clickPlay = document.getElementById("video");
clickPlay.addEventListener("click", function () {
if (video.paused == true) {
video.play();
} else {
video.pause();
}
});
}
And then you just add id="tag" to your video. I suggest customizing the id's to avoid redundancy. Your exercise now would be to see how you could capture the spacebar event.
I've created a link to play mp3 from and certain point and end at a certain point
<audio id="sample" src="Hard To Say I'm Sorry.mp3" controls preload></audio>
Play1
<script>
var audio = document.getElementById('sample');
var segmentEnd;
audio.addEventListener('timeupdate', function (){
if (segmentEnd && audio.currentTime >= segmentEnd) {
audio.pause();
}
console.log(audio.currentTime);
}, false);
function playSegment(startTime, endTime){
segmentEnd = endTime;
audio.currentTime = startTime;
audio.play();
}
</script>
</body>
</html>
My question, how do I put the href "Play1" link into the audio control?
I'd like to hide my page's navigation when video is playing, just like the play button does.
Here's the script that succesfully hides the play button:
<script>
$('.vid').parent().click(function () {
if($(this).children(".vid").get(0).paused){
$(this).children(".vid").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".vid").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
</script>
And this script I tried to hide my navigation bar with:
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
</script>
Here's link to my site
Try using the jQuery .toggle() function;
$('.vid').parent().click(function () {
$(".navbar").toggle();
});
You didn't close your function and if statement
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
}
}
</script>
I know this is not advisable. But still need this feature to be implemented. Tried everything from onseeking,onseeked to media controller. Nothing worked. Are there any external libraries to disable seeking. would be helpful if some pointers on how to go about using custom controls.
The question is quite old but still relevant so here is my solution:
var video = document.getElementById('video');
var supposedCurrentTime = 0;
video.addEventListener('timeupdate', function() {
if (!video.seeking) {
supposedCurrentTime = video.currentTime;
}
});
// prevent user from seeking
video.addEventListener('seeking', function() {
// guard agains infinite recursion:
// user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
var delta = video.currentTime - supposedCurrentTime;
if (Math.abs(delta) > 0.01) {
console.log("Seeking is disabled");
video.currentTime = supposedCurrentTime;
}
});
// delete the following event handler if rewind is not required
video.addEventListener('ended', function() {
// reset state in order to allow for rewind
supposedCurrentTime = 0;
});
JsFiddle
It is player agnostic, works even when the default controls are shown and cannot be circumvented even by typing code in the console.
Extending the answer from #svetlin-mladenov, you can do the following to prevent the user from seeking any part of the video which has not been watched yet. This will also allow the user to rewind and the seek out any part of the video which had already watched previously.
var timeTracking = {
watchedTime: 0,
currentTime: 0
};
var lastUpdated = 'currentTime';
video.addEventListener('timeupdate', function () {
if (!video.seeking) {
if (video.currentTime > timeTracking.watchedTime) {
timeTracking.watchedTime = video.currentTime;
lastUpdated = 'watchedTime';
}
//tracking time updated after user rewinds
else {
timeTracking.currentTime = video.currentTime;
lastUpdated = 'currentTime';
}
}
});
// prevent user from seeking
video.addEventListener('seeking', function () {
// guard against infinite recursion:
// user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
var delta = video.currentTime - timeTracking.watchedTime;
if (delta > 0) {
video.pause();
//play back from where the user started seeking after rewind or without rewind
video.currentTime = timeTracking[lastUpdated];
video.play();
}
});
You could use an HTML5 video player like video.js and use CSS to hide the seek bar.
Or you could build your own controls for HTML5 video.
Also, the event you're looking for is 'seeking'. As in (with new jquery event binding):
$(myVideoElement).on('seeking', function(){
// do something to stop seeking
})
<!DOCTYPE html>
<html>
<body>
<video controls onseeking="myFunction(this.currentTime)">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>Video courtesy of Big Buck Bunny.</p>
<script>
var currentpos = 0;
function myFunction(time) {
if(time > currentpos) {
video.currentTime = currentpos;
}
}
var video = document.getElementsByTagName('video')[0];
function getpos(){
currentpos = video.currentTime;
}
onesecond = setInterval('getpos()', 1000);
</script>
</body>
</html>
Did the trick for me :)
var supposedCurrentTime = 0;
$("video").on("timeupdate", function() {
if (!this.seeking) {
supposedCurrentTime = this.currentTime;
}
});
// prevent user from seeking
$("video").on('seeking', function() {
// guard agains infinite recursion:
// user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
var delta = this.currentTime - supposedCurrentTime;
if (Math.abs(delta) > 0.01) {
//console.log("Seeking is disabled");
this.currentTime = supposedCurrentTime;
}
});
$("video").on("ended", function() {
// reset state in order to allow for rewind
supposedCurrentTime = 0;
});
To hide all the video controls use this -
document.getElementById("myVideo").controls = false;
Maybe it can help someone, I use this way to remove all the progress control callbacks.
player.controlBar.progressControl.off();
player.controlBar.progressControl.seekBar.off();
Assuming this is for a standard HTML5 video player and with no 3rd party JS library interfering:
This should stop them dead in their tracks, albeit over a decade late for your needs but still useful to others...
V.onseeking=function(){event.preventDefault(); alert('Please don\'t skip the tute!');};
NB: "V" being the ID of your player.
With video js as my video player instead of the vanilla HTML5 version:
.vjs-default-skin .vjs-progress-holder {
height: 100%;
pointer-events: none;
}
I declare a audio file in my page:
var audio = new Audio('my.mp3');
then I use click event to play it:
$(document).click(function () {
audio.currentTime = 0; // to make sure it play from the begain
audio.play();
})
It can play only at the first click time, after it ended, I click the document, it can not play again.How can I let it play again?
I tested this in Chrome and an exception occurs due to the audio.currentTime statement.
This worked (also in IE9):
$(document).click(function () {
audio.src = "my.mp3";
audio.play();
})