I'm trying to change the text when clicking on a button.
The button was created with a div :
<nav class="retour white">Retour</nav>
<div class="pause" id="pause" onclick="playpause()">Pause</div>
<video autoplay id="bgvid" loop>
<source src="videos/chat/chat_noir.mp4" type="video/mp4">
</video>
My function :
function playpause(){
var video = document.getElementById("bgvid");
var pauseText = document.getElementById("pause");
if (video.paused){
video.play();
pauseText.innerHTML = "Pause";
} else {
video.pause();
pauseText.innerHTML = "Jouer";
}
}
My CSS :
.retour{
width:100%;
height: 50px;
text-align:center;
position:fixed;
z-index: 2;
top: 0px;
background-color:rgba(0,0,0,0.6);
}
.retour a {
color: inherit;
text-decoration: none;
position: relative;
top: 50%;
padding:14px;
display:inline-block;
transform: translateY(-50%);
}
/****** VIDEOS ******/
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.white{
background-color: rgba(255,255,255, 0.6) !important;
}
.pause{
width:80px;
height: 50px;
text-align:center;
position:fixed;
z-index: 2;
top: 0px;
right:0px;
background-color: rgba(255,255,255, 0.6);
}
.pause a {
color: inherit;
text-decoration: none;
position: relative;
top: 50%;
padding:14px;
display:inline-block;
transform: translateY(-50%);
}
So I'm able to change the text, but it's removing the a tag and removing my style. I tried to add
document.getElementById("pause").getElementsByTagName("a")
but it didn't work.
You have:
<div class="pause" id="pause" onclick="playpause()">Pause</div>
Because you have this, the link dissapears when you set the innerHTML of the div later.
To correct your issue and keep the a from dissapearing, you need to get the right DOM reference to it:
var anchor= document.querySelector("#pause > a");
Next, don't use inline HTML event handlers as they create spaghetti code and cause global event handling wrapper functions around your event code. These wrappers change the binding of this if used by your code.
Here's how to connect to an event handler that uses the W3C DOM Standard:
window.addEventListener("DOMContentLoaded", function(){
var video = document.getElementById("bgvid");
var pauseText = document.getElementById("pause");
var anchor= document.querySelector("#pause > a");
pauseText.addEventListener("click", function(){
if (video.paused){
video.play();
anchor.innerHTML = "Pause";
} else {
video.pause();
anchor.innerHTML = "Jouer";
}
});
});
Amd, note the div code I showed at the top - - it no longer has the
onclick="playPasue() in it.
You can use firstElementChild of pause element. I guess problem is a tag is removed
So I'm able to change the text, but it's removing the a tag and removing my style
function playpause(){
var video = document.getElementById("bgvid");
var pauseText = document.getElementById("pause").firstElementChild;
if (video.paused){
video.play();
pauseText.innerHTML = "Pause";
} else {
video.pause();
pauseText.innerHTML = "Jouer";
}
}
This should work.
document.getElementById("pause").onclick = function(){
var video = document.getElementById("bgvid");
var pauseText = document.querySelector("#pause a");
if (video.paused){
video.play();
pauseText.innerHTML = "Pause";
}else{
video.pause();
pauseText.innerHTML = "Jouer";
}
}
<!-- Got video from http://www.w3schools.com/ -->
<video width="400" id="bgvid">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<div class="pause" id="pause">Pause</div>
You must use it:
function playpause() {
document.getElementById("pause").innerHTML = "Jouer";
}
<div class="pause" id="pause" onclick="playpause()">Pause</div>
Related
I want to hover on text and have a video appear and play when the user hovers and when you are not hovering, the video would disappear.
I found the following on codepen which does work for both images and video when hovering on specific text, but when I copy the HTML code to list another video since I don't want this for images the next video won't play. It will only play the first video listed. Please help!
function vidPlay() {
$("#video1").get(0).play();
};
function vidPause() {
$("#video1").get(0).pause();
};
$(document).ready(function(){
$("#textToggler").click(function(){
$(".toggleText").toggle();
});
});
function toggleImage() {
$(".hiddenclickimg").toggle();
};
.hiddenimg {
display: none;
}
.hiddentxt {
font-weight: bold;
color: #F00;
z-index:99;
}
.hiddentxt a {
color: #F00;
text-decoration: none;
z-index: 99;
}
.hiddenclick {
font-weight: bold;
color: #F00;
text-decoration: none;
cursor: pointer;
}
.hiddenclick a {
color: #F00;
text-decoration: none;
}
.hiddenclick a:visited {
color: #F00;
text-decoration: none;
}
.hiddentxt:hover ~ .hiddenimg {
display: block;
position: absolute;
z-index: 2
}
.hiddenclickimg {
display: none;
}
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<p>
Hover to see a <span class="hiddentxt">banana</span><span class="hiddenimg"><img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg" width="250" /></span>.
</p>
<p>
Let's see if it works with <span class="hiddentxt" onmouseover="vidPlay()" onmouseout="vidPause()">videos</span>. (The video should play when it's displayed, but sometimes it takes a while to load.)
<span class="hiddenimg"><video id="video1" loop>
<source src="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4" type="video/mp4">
</video></span>
</P>
<p> Click <span class = "hiddenclick" onclick = "toggleImage()">here</span> to show image.<br>
<span class="hiddenclickimg"><img src = "https://s-media-cache-ak0.pinimg.com/originals/22/74/8c/22748c9b9cc2c039aed206cab0247404.gif"/></span>
</p>
</body>
Use classes instead of ID. IDs (as the name suggests) should be unique.
Here's an example how to hover to play/pause multiple videos - without the unnecessary jQuery:
const ELS_aVid = document.querySelectorAll(".hoverVid");
const toggleVideo = (ev) => {
const EL = ev.currentTarget;
const EL_video = EL.querySelector("video");
const isPlay = ev.type === "mouseenter";
EL_video[isPlay ? "play" : "pause"]();
};
ELS_aVid.forEach(EL => {
["mouseenter", "mouseleave"]
.forEach(evt => EL.addEventListener(evt, toggleVideo))
});
.hoverVid {
position: relative;
}
.hoverVid video {
position: absolute;
height: 150px;
top: 100%;
left: 0;
z-index: 1;
box-shadow: 0 0 30px rgba(0,0,0,0.3);
/* "hidden" and prepared animation state*/
transition: 0.5s;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(20px);
}
.hoverVid:hover video {
/* on hover, animate into view */
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
<a class="hoverVid" href="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4">
Hover to watch video
<video loop src="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4"></video>
</a>
<br>
or if you feel like
<a class="hoverVid" href="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4">
watch the same video again LOL
<video loop src="https://mtc.cdn.vine.co/r/videos/ECBC329ACC1050514912117440512_1c6599f182f.4.6.16444000809832514200.mp4"></video>
</a>
Search for any JavaScript Method you don't understand (like i.e: querySelectorAll or forEach) on the MDN Docs
I salute everyone.I want to make my audio player!Changing volume is not a problem.
But here's to make the music download band show the current status can not.
I did an imitation of the audio start button- it's square and the music starts.
Then I placed a rectangle inside which has a line that should be the width of the audio duration.
That's what I can't do.
in the example there is an audio tag, it is hidden, it is it I run
How to make the width of the line depending on the duration of the music?
my attempt
rect.onclick = function() {
audio.play();
rect.style.display = "none";
circle.style.display = "block";
}
circle.onclick = function() {
rect.style.display = "block";
circle.style.display = "none";
audio.pause();
audio.currentTime = 0;
}
line.width = audio.timeupdate + "%"
#audio {
display: none;
}
#rect {
width: 50px;
height: 50px;
background: red;
}
#circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: green;
display: none;
}
#progress {
width: 250px;
height: 30px;
border: 1px solid #000;
padding: 0;
}
#line {
width: 1px;
height: inherit;
background: #000;
margin: 0;
}
<audio id="audio" controls>
<source src="https://sefon.pro/api/mp3_download/direct/149166/3vUCANmBX7mfWhZQzAC2W2bci3su76uyLlxX4Jsj8Fd4OK2bsVkfkZ7QbcVKyeJelmfE8631OxZYGzJvTsVm22lgsfJIaPpWDFRJx6OOq3snoWQvOrbt0yUx8buTt_Sl5ioUlnJdMfJVcK8M-7dZGTN1PIe2q6MvG8_MiQAJ/"/>
</audio>
<div id="rect"></div>
<div id="circle"></div>
<div id="progress">
<div id="line"></div>
</div>
I suggest You to research little:
How to change progress bar in loop?
Solution for Your needs:
Add function that checks every 10 ms what is audio.currentTime and set progress bar position to it in % (track position *100 / track lenght)
I have a video that is controlled by the user scroll, this works really nicely on safari, but on chrome it lags and jumps point to point rather than play smoothly. Is this an issue with my video file or is it something to do with my chrome?
Link to example: https://advancedriderwear.com/Updates/Feature-Test/Video/
Code:
HTML:
<div id="set-height"></div>
<div id="time"></div>
<div id="scroll"></div>
<div class="video-stick">
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm; codecs="vp8, vorbis"" src="Beast_exploding_animation.mp4"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="Beast_exploding_animation.mp4"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="Beast_exploding_animation.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>
</div>
CSS:
body{
background: black;
}
.space{
height: 100vh;
width: 100%;
background: black;
}
#video-stick{
position: relative;
text-align: center'
}
#set-height {
display: block;
height: 9000px;
}
#v0 {
position: fixed;
top: 50px;
height: 80%;
margin: auto;
}
#time {
position: fixed;
display: block;
top: 10px;
right: 10px;
z-index: 2;
width: 10px;
height: 10px;
border-radius: 20px;
background-color: rgba(0,0,255,0.5);
}
#scroll {
position: fixed;
display: block;
top: 10px;
right: 10px;
z-index: 2;
width: 10px;
height: 10px;
border-radius: 20px;
background-color: rgba(255,0,0,0.5);
}
JS:
// select video element
var vid = document.getElementById('v0');
var time = $('#time');
var scroll = $('#scroll');
var windowheight = $(window).height()-20;
var scrollpos = window.pageYOffset/400;
var targetscrollpos = scrollpos;
var accel = 0;
// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
// pause video on load
vid.pause();
window.onscroll = function(){
//Set the video position that we want to end up at:
targetscrollpos = window.pageYOffset/400;
//move the red dot to a position across the side of the screen
//that indicates how far we've scrolled.
scroll.css('top', 10+(window.pageYOffset/5000*windowheight));
};
setInterval(function(){
//Accelerate towards the target:
scrollpos += (targetscrollpos - scrollpos)*accelamount;
//move the blue dot to a position across the side of the screen
//that indicates where the current video scroll pos is.
time.css('top', 10+(scrollpos/5000*400*windowheight));
//update video playback
vid.currentTime = scrollpos;
vid.pause();
}, 40);
I'm setting up a custom audio player for my website, but I can't get it to work, how do I style the tag?
Hello all, first question I'll be asking on this website because this issue is driving me nuts. So I've been trying to make this custom audio player for my website but I'm a complete noob when it comes to javascript, but I managed to fumble my way to create an audio playlist for the default tag, however after many, MANY attempts, after looking up some tutorials, I can't seem to get this same code I have to work when I create a custom audio player as most of the tutorials I've seen only deal with a single music track.
Here's the code I'm using at the moment
HTML5:
<div id="playerbg">
<style>
#playlist{
list-style: none;
}
#playlist li a{
color: black;
text decoration:none;
}
#playlist .current-song a{
color: blue;
}
</style>
<audio src="" controls id="audioPlayer">
</audio>
<ul id="playlist">
<li class="current-song">01. Supersonic</li>
<li>02. Supersonic (Instrumental)</li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.0.js">
</script>
<script src="/audioPlayer.js">
</script>
<script>
audioPlayer()
</script>
</div><!-- playerbg ends here -->
Javascript:
function audioPlayer(){
var currentSong = 0;
$("#audioPlayer")[0].src = $("#playlist li a")[0];
$("#playlist li a").click(function(e){
e.preventDefault();
$("#audioPlayer")[0].src = this;
$("#audioPlayer")[0].play();
$("#playlist li").removeClass("current-song");
currentSong = $(this).parent().index();
$(this).parent().addClass("current-song");
});
$("#audioPlayer")[0].addEventListener("ended", function(){
currentSong++;
if(currentSong == $("#playlist li a").length)
currentSong = 0;
$("#playlist li").removeClass("current-song");
$("#playlist li:eq("+currentSong+")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play();
});
}
Here's the current player:
https://imgur.com/BTAYBrk
Here's what I roughly hope to achieve (with the playlist from the first image intact):
https://imgur.com/e7Xyt3N
You can not style the audio tag directly.
As I saw your code, I have it clear that you know it already. But the issue is that you need to code the JavaScript part to make it work.
Understanding JavaScript for audio tag.
When you have an HTML audio tag like this:
<audio src="your_audio.mp3"></audio>
You can reference it in your code like this:
let audio = document.querySelector("audio");
And with this, in your audio variable, you can access pretty much to every control in the audio tag. Some of them and that I think you may need are:
Methods:
play() To play the loaded audio.
pause() To pause the loaded audio.
Properties:
currentTime The time value (between 0 and 1) of the playing media.
volume The actual volume of the audio. (Value between 0 and 1)
duration The duration of the audio.
Using event listeners.
One of the most common uses of JavaScript is exactly that, event listeners. This helps your application with handling what happens on the browser (button clicks, mouse move, window resize, etc), so this will be a lot useful to create your own player and handle this events to update the real audio tag.
Based on your example of this player:
You can see a working example of a player with a similar style of your desire. Hope it helps.
Player:
var audio = document.querySelector("audio"),
playButton = document.querySelector("#audio-play"),
progress = document.querySelector("#audio-playbar"),
volumeRange = document.querySelector("#volume-range");
const play = () =>{
if(audio.paused){
console.log("play");
playButton.classList.add("paused");
audio.play();
}else{
console.log("pause");
playButton.classList.remove("paused");
audio.pause();
}
};
const bwd = () =>{
console.log("bwd");
audio.currentTime = 0;
};
const fwd = () =>{
console.log("fwd");
audio.currentTime += 5;
};
volumeRange.addEventListener("change",(event)=>{
audio.volume = event.target.value / 100;
});
audio.addEventListener("timeupdate",(e)=>{
progress.value = (e.target.currentTime / e.target.duration) * 100;
if(e.target.currentTime/e.target.duration === 1){
play();
audio.currentTime = 0;
}
});
document.querySelector("#audio-mute").addEventListener("mouseenter",(event)=>{
document.querySelector("#volume-control")
.style = "display: block;";
});
document.querySelector("#volume-control").addEventListener("mouseleave",(event)=>{
document.querySelector("#volume-control")
.style = "display: none;";
});
playButton.addEventListener("click",play);
document.querySelector("#audio-fwd")
.addEventListener("click",fwd);
document.querySelector("#audio-bwd")
.addEventListener("click",bwd);
#audio-player{
background: #005bab;
width: 300px;
height: 40px;
border-radius: 15px;
position: relative;
}
#audio-player::after{
content: "";
background: url('https://i.imgur.com/aDz7QOn.png') no-repeat;
display: block;
position: absolute;
width: 100vw;
height: 100vh;
margin-top: -8px;
margin-left: 270px;
}
#audio-play{
width: 20px;
height: 20px;
background: url('https://i.imgur.com/pOdMApr.png') no-repeat;
background-size: cover;
position: absolute;
margin: 10px;
margin-left: 15px;
cursor: pointer !important;
}
#audio-bwd{
width: 25px;
height: 15px;
background: url('https://i.imgur.com/z4j9Qp9.png') no-repeat;
background-size: cover;
position: absolute;
margin: 12px;
margin-left: 45px;
cursor: pointer !important;
}
#audio-fwd{
width: 25px;
height: 15px;
background: url('https://i.imgur.com/E7X60LH.png') no-repeat;
background-size: cover;
position: absolute;
margin: 12px;
margin-left: 75px;
cursor: pointer !important;
}
#progress{
position: absolute;
margin: 8px;
margin-left: 105px;
}
#audio-playbar{
border-radius: 0;
background: black;
height: 10px;
}
progress[value]::-webkit-progress-bar {
background-color: #000;
border-radius: 0;
}
progress[value]::-webkit-progress-value{
background: #c0c0c0;
}
.paused{
background: url('https://i.imgur.com/EwMhtwR.png') no-repeat !important;
background-size: cover;
}
#audio-mute{
width: 26px;
height: 26px;
position: absolute;
margin: 11px;
z-index: 11;
margin-left: 278px;
background: url('https://i.imgur.com/g3W1tUI.png') no-repeat;
}
#volume-control{
position: absolute;
margin-left: 230px;
display: none;
z-index: 12;
}
<audio src="http://developer.mozilla.org/#api/deki/files/2926/=AudioTest_(1).ogg">
Your browser does not support the <code>audio</code> element.
</audio>
<div id="audio-player">
<div id="controls">
<span id="audio-play"></span>
<span id="audio-bwd"></span>
<span id="audio-fwd"></span>
</div>
<div id="progress">
<progress id="audio-playbar" max="100" value="60"></progress>
</div>
<div id="mute">
<span id="audio-mute"></span>
<span id="volume-control">
<input id="volume-range" type="range" min="0" max="100">
</span>
</div>
</div>
So I have already coded other stuff to appear after a background video finishes playing using this javascript
var vid = document.getElementById("bgvid");
var vid2 = document.getElementById('akiratrailer');
vid.onended = function() {myFunction()};
function myFunction() {
vid2.style.display = "block";
document.getElementById("headline2").innerHTML = "stuff";
document.getElementById("headline3").innerHTML = "stuff";
};
How would I add a custom button (I already have the CSS for the button) to this javascript so that it may show up after the background video finishes along with the other stuff?
This is my the html for the button
<a href='newpage.html' class='button'>blah blah blah</a>
my website for reference My Website
Try this:
var vid = document.getElementById( 'bgvid' ),
vid2 = document.getElementById( 'content' );
vid.onended = function() {
vid2.style.display = 'block';
document.getElementById( 'headline2' ).innerHTML = 'stuff';
document.getElementById( 'headline3' ).innerHTML = 'stuff';
}
* {
box-sizing: border-box
}
body {
margin: 0
}
#bgvid {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%
}
#content {
display: none;
position: fixed;
overflow-y: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
text-align: center
}
#akiratrailer {
margin: 0 auto;
width: 50%
}
.button {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
text-decoration: none
}
.button:hover {
background: #ddd;
color: black
}
<video autoplay muted id="bgvid">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div id="content">
<h2 id="headline2"></h2>
<video id="akiratrailer" controls>
<source src="http://andiviaandes.com/videos/akiratrailer.mp4" type="video/mp4">
</video>
<h2 id="headline3"></h2>
<a href='#' class='button'>blah blah blah</a>
</div>
Well you could either generate the button dynamically using the below code in onended callback
var button = document.createElement('button');
var node = document.createTextNode('Click me');
button.appendChild(node);
button.classList.add('button');
body.appendChild(button); //or any other parent element you wish to add the button to
or just simply add the button in HTML, set up the class and adjust display to 'display: none' and change it similarily to how you manipulate the headlines right now.
Here's the jsbin with a working example: http://jsbin.com/pepidedimo/edit?html,css,js,console,output