My page contains two HTML5 video players - each with their own controller button below using JS.
Both sets of buttons only work with one of the players (the second one) - I know I need to name each player and buttons but I have tried many combos and can't get it to work. Code below…
<div style="text-align:center">
<video poster="poster1.png" id="video1" width="90%">
<source src="video1.mp4" type="video/mp4">
</video><br>
<button onclick="playPause()">Play/Pause</button>
<br><br>
</div>
<script>
var myVideo = document.getElementById("video1");
function myVideo.playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<div style="text-align:center">
<video poster="poster2.png" id="video2" width="90%">
<source src="video2.mp4" type="video/mp4">
</video><br>
<button onclick="playPause()">Play/Pause</button>
<br><br>
</div>
<script>
var myVideo = document.getElementById("video2");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
Easiest way would be to pass the id you want into the script (so you only need the script to exist once):
<script>
function playPause(vidId) {
var myVideo = document.getElementById(vidId);
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<div style="text-align:center">
<video poster="poster1.png" id="video1" width="90%">
<source src="trailer.mp4" type="video/mp4">
</video><br>
<button onclick="playPause('video1')">Play/Pause</button>
<br><br>
</div>
<div style="text-align:center">
<video poster="poster2.png" id="video2" width="90%">
<source src="trailer.mp4" type="video/mp4">
</video><br>
<button onclick="playPause('video2')">Play/Pause</button>
<br><br>
</div>
Related
I am making a tiktok ui project but video are not autoplay when it's on screen after scroll
Like tiktok
Demo
My code
<div class="parent">
<div class="vi">
<video class="video-player" id="vid1" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
</div>
<div class="vi">
<video class="video-player" id="vid1" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
</div> <div class="vi">
<video class="video-player" id="vid1" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
</div> <div class="vi">
<video class="video-player" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
</div> <div class="vi">
<video class="video-player" controls> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4"> </video>
</div>
</div>
<script>
function isOnScreen(element)
{
var curPos = element.offset();
var curTop = curPos.top;
var screenHeight = $(window).height();
return (curTop > screenHeight) ? false : true;
}
if(isOnScreen($('video'))) {
console.log("")
};
</script>
Please solve this issue with javascript or jQuery
You can try like this
var remoteVideo = document.createElement("video"); /*your Video element */
remoteVideo.id = `xxx_ID`;
remoteVideo.autoplay = true;
remoteVideo.playsInline = true; /* For Safari fix */
or
remoteVideo.play();
You should give attribute "autoplay" to each video tag like this.
<video class="video-player" controls **autoplay**> <source src="https://writesonic.com/static/landingpage/dist/images/willscheren.mp4" type="video/mp4" > </video>
I think you should add video components on the fly, rather than writing links directly in HTML.
When I click on the play/pause button nothing seems to happen, after clicking on the video I want to play, the vs code is not finding me any error nor the dev console.
I don't know what the issue is with the play/pause button.
Also, there is some issue with the third video, when I click on the third video it gives the following error:
Failed to load resource: the server responded :5500/favicon.ico:1 with a status of 404 (Not Found)
window.onload = init;
function init() {
var frame1 = document.querySelector('#video1');
frame1.innerHTML += ' <br> <button id="play">play </button> <button id="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> ';
}
//to play another video
var click = document.querySelectorAll('#videos > div');
click.forEach(function(elem) {
elem.addEventListener('click', nextPlaylist);
function nextPlaylist(evt) {
var save = elem.querySelector('.video').currentSrc;
var save1 = elem.querySelector('.video');
elem.innerHTML = `<video class="video" > <source src="${save}"> </video> <br> <button id="play">play </button> <button id="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> `;
var play = document.querySelector('#play');
play.addEventListener('click', playVid);
var pause = document.querySelector('#pause');
pause.addEventListener('click', pauseVid);
function playVid() {
save1.play();
}
function pauseVid() {
save1.pause();
}
}
}
);
<body>
<header class="head">
VIDEO PLAYER
</header>
<div id="videos">
<div id="video1">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2018_04/preview/180301_06_A_CityRoam_03.mp420186.webm">
</video>
</div>
<div id="video2">
<video class="video" controls>
<source src= "https://www.videvo.net/videvo_files/converted/2016_01/preview/Forest_15_2_Videvo.mov92730.webm">
</video>
</div>
<div id="video3">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
</video>
</div>
</div>
<script src="video.js"></script>
</body>
There are several issues with the code.
You declare the video element but then override it.
var save1= elem.querySelector('.video');
but then, you remove that element and render a different one
elem.innerHTML = `<video class="video" >...
So you need to retrieve it again (or just move var save1= elem.querySelector('.video'); after the line above.
When the user clicks on the buttons the parent's listener (elem.addEventListener('click', nextPlaylist); also get fired, so it re-render the videos.
To avoid that, use stopPropagation to prevent from the event from propagate to the parent
You have multiple id attribute with the same value (when the user clicks on more than one video) so document.querySelector catch the first one (which wasn't work too because the reasons above).
Replace the ids to classes and use elem.querySelector instead of document.querySelector to make sure it will find the buttons in a specific div.
//to play another video
var click = document.querySelectorAll('#videos > div');
click.forEach(function(elem) {
elem.addEventListener('click', nextPlaylist);
});
function nextPlaylist(evt) {
const elem = evt.currentTarget;
var save = elem.querySelector('.video').currentSrc;
elem.innerHTML = `<video class="video" > <source src="${save}"> </video> <br> <button class="play">play </button> <button class="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> `;
var save1 = elem.querySelector('.video');
var play = elem.querySelector('.play');
play.addEventListener('click', playVid);
var pause = elem.querySelector('.pause');
pause.addEventListener('click', pauseVid);
function playVid(e) {
e.stopPropagation();
save1.play();
}
function pauseVid(e) {
e.stopPropagation();
save1.pause();
}
}
<header class="head">
VIDEO PLAYER
</header>
<div id="videos">
<div id="video1">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2018_04/preview/180301_06_A_CityRoam_03.mp420186.webm">
</video>
</div>
<div id="video2">
<video class="video" controls>
<source src= "https://www.videvo.net/videvo_files/converted/2016_01/preview/Forest_15_2_Videvo.mov92730.webm">
</video>
</div>
<div id="video3">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
</video>
</div>
</div>
By the way, you can move the function out. It's a shame to create new function for each element instead of only one.
https://jsbin.com/koritub/edit?html,js,output
I want to make JavaScript HTML5 player, but I can't use common,
I have big data with mp3 files, each files have unique id, and I can't understand, how can I select the id and the put URL to player?
I just start learn JS, and can't figure out this
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
//////==== DOM ====///////
<div id="23231">
<button>play</button>
</div>
<div id="34561">
<a href="audio/song-3.mp3"></>
<button>play</button>
</div>
<div id="67771">
<button>play</button>
</div>
Try like this $(this).parent().find('a').attr('href'); use with class or tag instead of id
$(document).on('click','button',function(){
var src = $(this).parent().find('a').attr('href');
$('source').attr('src',src)
console.log( $('source').attr('src'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
//////==== DOM ====///////
<div id="23231">
<button>play</button>
</div>
<div id="34561">
<button>play</button>
</div>
<div id="67771">
<button>play</button>
</div>
You should add an id to the audio and the source element .
<audiod id="audioPlayer" controls>
<source id="MP3source" src="song.mp3" type="audio/mpeg">
</audio>
Plain Javascript
var audio = document.getElementById('audioPlayer');
var source = document.getElementById('MP3source');
source.src= document.getElementById('23231')
.getElementsByTagName('a')[0].href;
//set source.src to the link element inside the 23231 div
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
You can try the below code:
function playmusic(file)
{
audio = file.parentNode.childNodes[1].getAttribute("href");
console.log(audio);
var obj = document.getElementById('player');
obj.src = audio;
obj.play();
}
<audio id="player" controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
//////==== DOM ====///////
<div id="23231">
<button onClick="return playmusic(this)" >play</button>
</div>
<div id="34561">
<button onClick="return playmusic(this)" >play</button>
</div>
<div id="67771">
<button onClick="return playmusic(this)" >play</button>
</div>
I can currently play and pause a video by clicking anywhere in the <video> tag.But unfortunately, when i have added a second video the function works only for the first video only.
var video = document.getElementById('vid');
video.addEventListener('click', function() {
this.paused?this.play():this.pause();
},
false);
video.addEventListener("pause", function() {
document.getElementById("paused").style.display = "";
});
video.addEventListener("play", function() {
document.getElementById("paused").style.display = "none";
});
<div id="main">
<div id="computer" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Any issue with the js code. Kindly advice.
it will not work lake that because ,the interpreter will consider just the last id with the same element ,if you use just two videos then you can just add other video id and paused id
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused2" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid2">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
try to use classes instud of ids
for more detaill take a lok to this page
http://flash.flowplayer.org/demos/installation/multiple-players.html
The code below works but it plays ALL instances of the projekktor video player in the DOM simultaneously. How would I revise the code to only play the video within the same parent div as the .startb i click?
html
<div class="videoContainer">
<div class="playerHolder">
<div class="videoPlayer"><video class="projekktor" poster="poster.jpg" title="" width="640" height="385" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
</video></div>
<div class="startb"><img src="dbs/images/start.png"/></div>
<div class="postImage"><img src="006_CCC_Magdelena_poster.jpg" title="" width="640" height="385" /></div>
</div>
</div>
js
$('.startb').click(function() {
projekktor('*').each(function() {
this.setPlay();
});
});
Try this:
$('.startb').click(function() {
$(this).parent('div').find('.projekktor').setPlay();
});