I was wondering if it is possible to extract the controls of a video. I mean that instead of being the controls on top of the video, that these were separate and that the video could be controlled from there. Thank you in advance.
I know you can disable your browser's controls by not setting the attribute controls. see https://www.w3schools.com/TAgs/att_video_controls.asp
Then you can define your own custom controls by adding event handlers to the UI elements you wish to use for controlling playback.
function playBtnHandler(event) {
myVideo.play();
}
myBtn.addEventListener("click", playBtnHandler);
U can try this...............
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
</head>
<body>
<video id="Video1" autoplay>
// Replace these with your own video files.
<source src="1.mp4" type="video/mp4" />
Download the video file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
Related
OBJECTIVE: Trying to autoplay when mouse is over the video itself.
HTML:
<video id = "litVideo" src="lt.mp4" onmouseover="over(this)" onmouseout="out(this)" controls>
JAVASCRIPT:
function over(element) {
alert("mouseover");
element.append(autoplay)
**also tried element.add(autoplay)**
}
function out(element) {
alert("mouseout");
element.remove(autoplay);
}
Problem: Mouseover is alerting. However, autoplay is not working. Please help.
use play() and pause() function
const video = document.getElementById("video")
video.onmouseover = function(){
video.play()
}
video.onmouseout = function(){
video.pause()
}
<video src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" controls id="video"></video>
However if you want to use your approach then use
element.setAttribute("autoplay")
I have a page with some videos showing like a web course: so after the first one finishes, the second one appears and so on.
The code used is very simple, with a display none/block function.
**What I want to do is to save in localStorage when a video changes from display "none" to "block", and retrieve it on Page Load** (because I don't want to start again from video 1 every time I load or refresh the page).
Some conditions:
I must use a specific internal platform, very old, to load my code. Is customized by the place where I work
I can't use external libraries or tag too new
I search for the simpliest, pure solution code
the code down is a part of the one I used, I assure this is the only working way, I tried better ways but nothing
Here the code with 2 videos:
html
<script type="text/javascript">
document.getElementById('Video1').addEventListener('ended',myHandler,false);
function myHandler(e) {
var video2 = document.getElementById("Video2");
if ( video2.style.display === "none") {
video2.style.display = "block";
} else {
}
}
</script>
<video id="Video1" controls="" width="320" height="240">
<source src="https://www.tdblog.it/wp-content/uploads/2020/07/Video_aruba_200721_04.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="Video2" controls="" style="display:none; float:right;" width="320" height="240">
<source src="https://www.tdblog.it/wp-content/uploads/2020/06/1160438711001_6017851885001_6017852130001.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Thanks for the help!
Here the new code:
<script type="text/javascript">
document.getElementById('Video1').addEventListener('ended',myHandler,false);
function myHandler(e) {
var video2 = document.getElementById("Video2");
if ( video2.style.display === "none") {
video2.style.display = "block";
localStorage.setItem('video1Completed', 'true');
} else {
}
}
window.onload = function(){
localStorage.getItem('video1Completed')=='true' {
Video2.style.display = "block";
} else {
Video2.style.display = "none";
}
}
</script>
<video id="Video1" controls="" width="320" height="240">
<source src="https://www.tdblog.it/wp-
content/uploads/2020/07/Video_aruba_200721_04.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="Video2" controls="" style="display:none; float:right;"
width="320" height="240">
<source src="https://www.tdblog.it/wp-
content/uploads/2020/06/1160438711001_6017851885001_6017852130001.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
You forgot the if statement plus you need to get the video2 element.
document.getElementById('Video1').addEventListener('ended', myHandler, false);
function myHandler(e) {
var video2 = document.getElementById("Video2");
if (video2.style.display === "none") {
video2.style.display = "block";
localStorage.setItem('video1Completed', 'true');
} else {
}
}
window.onload = function() {
var video2 = document.getElementById("Video2");
if (localStorage.getItem('video1Completed') == 'true') {
video2.style.display = "block";
} else {
video2.style.display = "none";
}
}
I have designed a video question using Html and i have removed controls for video using Jquery, so i need to have onclick functionality like when we click on the video it should be played and if am clicking again it should be paused .
Below your html code
<video id="video" width="1180" height="664" poster="put here your poster url" preload="auto">
<source src="put here your video url" type="video/mp4">
</video>
Below jquery code
var video = document.getElementById("video");
video.addEventListener("click", function(event) {
if (video.paused == true) {
video.play();
}
else{
video.pause();
}
});
You can play or pause a vide like this. This should be able to toggle:
$(document).ready(function(){
$('YOUR_VIDEO_ID_OR_CLASS').click(function(){
$(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
});
});
An easy way could be like this:
$(function() {
var video = $('video')[0];
$('button').click(function() {
if( video.paused ) {
video.play();
}
else {
video.pause();
}
});
});
Fiddle Example
You can change 'button' to another element as trigger for the play/pause.
You can also change it to the video it self, if you want just to click on the video to play and pause it.
This is what you need:
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
}
else
{
video.pause();
button.textContent = ">";
}
}
</script>
When I add onclick="playPause()" to just one video it works great. I click the video and it'll play or pause just like I want it to. If I have more than one video, even if the videos have different IDs (for example: video id="v1" and video id="v2") whenever I click on one video it'll always play one specific video. Using this script on multiple videos seems to only allow play/pause toggling on one video. Here's the html and script I'm using:
<video id="v1" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v2" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v2");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v3" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v3");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
BTW: not a big deal, but I've noticed the original Play button doesn't work anymore when I use this script. Is there a way to fix that?
You can pass the clicked element as an argument to the function like onclick="playPause(this)", then you just have a single definition:
function playPause (video) {
if (video.paused)
video.play();
else
video.pause();
}
Or alternatively you can find all videos and bind event listeners to them iteratively using document.getElementsByTagName() or document.querySelectorAll():
document.querySelectorAll('video').forEach((video) => {
video.addEventListener('click', function (event) {
if (this.paused)
this.play();
else
this.pause();
});
});
I have many audio elements on a single page and I want to play just one element at a time. That is if one audio element is playing and I click on play on another element, the previous audio element should pause.
I found a jQuery code from another question to do this but that uses an image as play/pause controls. I'm using the inbuilt controls='controls' attribute for the audio element instead. Is it possible to use jQuery to control the play/pause feature for the audio element in my case?
Here is my HTML code
<div>
<p class="song"><h3><strong>#1 Intro - The Oath</strong></h3><p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
<div>
<p class="song"><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
Here is the jQuery code
$(document).ready(function() {
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
});
The jQuery code doesn't seem to be working for me.
$(function(){
$("audio").on("play", function() {
$("audio").not(this).each(function(index, audio) {
audio.pause();
});
});
});
See sample at JSFiddle
Vanilla JS solution
Here's a solution that doesn't require jQuery.
function onlyPlayOneIn(container) {
container.addEventListener("play", function(event) {
audio_elements = container.getElementsByTagName("audio")
for(i=0; i < audio_elements.length; i++) {
audio_element = audio_elements[i];
if (audio_element !== event.target) {
audio_element.pause();
}
}
}, true);
}
document.addEventListener("DOMContentLoaded", function() {
onlyPlayOneIn(document.body);
});
Some things to note:
Because this listens for events on a parent element, not on the audio elements themselves, they can be added or removed after the page is loaded and it will still work.
It watches for the play event in the capture phase because play events don't bubble.
More media events are described here on MDN.
Listening for "DOMContentLoaded" should work for most browers.
Little Modification to LostInComputer's Answer
In Your HTML Write:
<audio controls onplay="pauseOthers(this);" >
<source src="SourcePath">
</audio>
In Js Write:
function pauseOthers(ele) {
$("audio").not(ele).each(function (index, audio) {
audio.pause();
});
}
Assuming that your syntax for stopping and pausing tracks is correct (I don't know anything about the audio element), you should be able to do something like this:
$(".playback").click(function(e) {
// pause all other tracks
$('.audio').each(function () {
var song = this;
if (!song.paused) { song.pause(); }
});
// play the audio associated with this element
this.play();
});
<script>
function controlplay(e) {
document.querySelectorAll('.playback').forEach(item => { if(item.id != e.target.id) item.pause(); });
}
</script>
<script>
document.querySelectorAll('.').forEach(item => { item.addEventListener("play", event => { controlplay(event) })});
</script>
Angular:
<audio (play)="audioPlay($event)" controls preload="none">
<source [src]="url" type="audio/mpeg">
</audio>
audioPlay(e) {
let eAudio = this.domService.getDocument.getElementsByTagName('audio')
if (eAudio && eAudio.length > 0) {
for (var i = 0; i < eAudio.length; i++) {
if(e.target !== eAudio[i]){
eAudio[i].pause();
}
}
}
}
<script>
var nowplaying = null;
// Pause and reset playing audio before starting new selection
function pauseRunningAudio(id) {
if ( nowplaying != null && nowplaying != id) {
var x = document.getElementById(nowplaying);
x.pause();
x.load();
}
nowplaying = id;
}
</script>
<!-- id and function value must be the same -->
<audio controls onplay="pauseRunningAudio('song1')" id="song1">
<source src="Bohemian Rhapsody.mp3" type="audio/mpeg">
</audio>
<audio controls onplay="pauseRunningAudio('song2')" id="song2">
<source src="November Rain.mp3" type="audio/mpeg">
</audio>
<audio controls onplay="pauseRunningAudio('song3')" id="song3">
<source src="Smoke on the Water.mp3" type="audio/mpeg">
</audio>