Develop Reference

Randomly changing video with JS - javascript

I am a newbie, I want to show random videos when loading the website, I have found this code, change some things and achieve what I wanted, but now I need each video to have a small description and a link I attach this image I want something similar to this, is there someone here who can help me with this, thanks in advance.
https://piic.me/img-134
<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
<source id="OracleVidSRC"/>
</video>
<script>
var clip = document.querySelector("#OracleVidSRC");
var video = document.querySelector("#OracleVid");
var oracleVidArray = [
"http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4",
"http://localhost/website/wp-content/uploads/2021/10/6b_xlarge_preview.mp4",
"http://localhost/website/wp-content/uploads/2021/10/elementor1_xlarge_preview.mp4"
];
window.onload = function oracleFunction() {
clip.src = oracleVidArray[Math.floor(Math.random() * oracleVidArray.length)];;
//video.style = "display: block";
video.load();
}
</script>
You can also see the original code here:
Randomly changing video src with JS
I just want to include this in the js code above, (each video has a different url and description)
<figure class="wp-block-video">
<a rel="noreferrer noopener" href="https://website.com" target="_blank">
<video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
</video>
</a>
<figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description
</span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a></figcaption>
</figure>

Add class "none" in:
<figure class="wp-block-video none">
Edit css class:
.none { display:none; }
Put your code with "<figure" after code with "<video" as below:
<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
<source id="OracleVidSRC"/>
</video>
<figure class="wp-block-video none">
<a rel="noreferrer noopener" href="https://website.com" target="_blank">
<video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
</video>
</a>
<figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description
</span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a>
And in function oracleFunction() remove class none.

Hide button on videojs play()?

I have a play button inside of a video js video / container and I would like the button to hide(), when the video plays. It works if I just use $('.video-play-btn).hide() on the play function but the problem is I have numerous videos on the page so it is hiding them all, I only want the video that is being played for the button to hide.
html:
<div class="col-lg-6">
<video-js data-video-id="6563228568228"
data-embed="default"
data-application-id=""
class="video-js video-container--outer full-width"
controls
id=""
webkit-playsinline="true" playsinline="true"></video-js>
<!-- play button -->
<button class="video-play-btn btn"><i class="fa fa-play fa-play-video-inline"></i></button>
</div>
jquery:
var videoPlayer = videojs('video-one');
videoPlayer.on('play', function () {
$(this).parent().find('.video-play-btn').hide();
});

What you can do give the button id which is the video id with some prefix or suffix,on play function get the ID of video and embed suffix or prefix and hide that button.
In the below example v_6563228568228 is video id and btn_v_6563228568228 is the button id that is same as video id with prefix of btn_.This way you can provide unique id to your button.
Example.
<div class="col-lg-6">
<video
id="v_6563228568228"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="https://mobamotion.mobatek.net/samples/sample-mp4-video.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<button class="video-play-btn btn" id="btn_v_6563228568228"><i class="fa fa-play fa-play-video-inline"></button>
</div>
<script>
var videoPlayer = videojs('v_6563228568228');
videoPlayer.on('play', function () {
vid_id = $(this).attr('id');
$("#btn_"+vid_id).hide();
});
</script>

I would like to recover an id and insert it into several src, to avoid repeating

I want to retrieve "id" from each post to use in various places inside the post.
How can I achieve that?
$("a").attr("onclick", function() {
return "changeVideo('" + this.id + "')";
});
$("video").attr("src", function() {
return "https://WebSite" + this.id + "-.jpg";
});
$("video").attr("src", function() {
return "https://WebSite" + this.id + "-preview.mp4";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div title="First Post" id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="changeVideo('[Retrieve the id from the first post div]')">
<div class="thumb" onclick="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video muted poster="retrieve the id from the first post div" onmouseover="this.play()" onmouseout="this.pause()">
<source src="retrieve the id from the first post div" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
<h2>second post</h2>
<div title="Second Post" id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="changeVideo('[retrieve the id from the second post div]')">
<div class="thumb" onclick="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video muted poster="retrieve the id from the second post div" onmouseover="this.play()" onmouseout="this.pause()">
<source src="retrieve the id from the second post div" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>

I think the key here, is to loop through all the .post... And there is 3 attributes to set for each.
See comments in code.
// Loop through each post
$(".post").each(function(){
// Get the id
var id = $(this).data("id");
// Set the anchor's onclick
$(this).find("a").attr("onclick","changeVideo('" + id + "');");
// Set the poster and src
$(this).find("video").attr({
"poster":"https://WebSite" + id + "-.jpg",
"src":"https://WebSite" + id + "-preview.mp4"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<a onclick="">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
<h2>second post</h2>
<div class="post" title="Second Post" data-id="A-DIFFERENT-ID-FOR-FUN">
<a onclick="">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</a>
</div>
The id you look for is in a data- attribute in the .post element's markup. It also is the parent of the element you wish to "update"... So it's a good starting point to retreive the id and .find() the childs. An .each() loop is the best way to process them all correctly.

In your functions, this refers to the element to which you've bound the function.
Here's a demonstration:
$("video").attr("poster", function() {
console.log("This refers to: " + this);
console.log(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video></video>
But it seems that you want to get the id attribute from the containing <div> for each post.
I suggest that you assign each post <div> a class of "post".
Then you can select the desired post from within your functions by using jQuery's closest().
<div class="post" ... >
I recommend that you use a data attribute like data-id rather than the id attribute,
since the id attribute has its own specific purpose.
<div class="post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677" ... >
I recommend removing the <a> elements and binding a click handler directly to the .thumb elements. That way you simplify your HTML structure and don't need the inline onclick="" attributes.
Here's a working example:
$("video").attr({
'poster': function() {
var id = $(this).closest('.post').data('id');
return "https://WebSite" + id + "-.jpg";
},
'src': function() {
var id = $(this).closest('.post').data('id');
return "https://WebSite" + id + "-preview.mp4";
}
});
$(".thumb").on('click', function(e) {
e.preventDefault();
var id = $(this).closest('.post').data('id');
changeVideo(id);
});
function changeVideo(id) {
console.log('Changing Video: ' + id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>first post</h2>
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<h2>second post</h2>
<div class="post" title="Second Post" data-id="a-different-video-id">
<div class="thumb">
<video muted poster="" onmouseover="this.play()" onmouseout="this.pause()">
Your browser does not support HTML5 video.
</video>
</div>
</div>
That results in a structure like this:
<div class="post" title="First Post" data-id="1/1/8/2/1/4/4/5c5417cfefafd-677">
<div class="thumb">
<video muted="" poster="https://WebSite1/1/8/2/1/4/4/5c5417cfefafd-677-.jpg" onmouseover="this.play()" onmouseout="this.pause()" src="https://WebSite1/1/8/2/1/4/4/5c5417cfefafd-677-preview.mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
And jQuery has bound a click handler to each .thumb, which will pass the appropriate data-id to the changeVideo() function.

Javascript - Showing TypeError: player is null

var playPauseBtn = document.getElementById("play-pause");
var player = document.getElementById("header-video");
player.removeAttribute("controls"); // <--- error is here
playPauseBtn.onclick = function() {
if (player.paused) {
player.play();
this.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
} else {
player.pause();
this.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
}
};
<div id="header-container" role="banner">
<div class="top-image test-top"></div>
<!-- top image at the bottom of header -->
<div id="header-video-container" class="zoom">
<img id="header-fallback" src="yourimage.jpg" alt="" />
<!-- fallback image for header video -->
<video id="header-video" controls loop muted playsinline width="1280" height="720" role="img">
<source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/nb-show-reel.mp4" type="video/mp4" />
<!-- if adding track/subtitle see https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia -->
</video>
</div>
<a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fa fa-play" aria-hidden="true"></i></a>
<!-- video player control -->
</div>
Hey guys I'm using this script for video. But when we inspect things it showing TypeError. So can you guys help me to fix this? Thanks :)
Showing error in this line: player.removeAttribute("controls");

possible reasons are:
1- you are not assigning this id "header-video" to any tag.
OR
2-this JS code ran before the html is actually rendered in browser DOM.
solution:
1- check if you have assigned the same id without spelling errors.
2- use your JS once the DOM is loaded completely.
document.addEventListener("DOMContentLoaded", function() {
// all of your js code.
});
Note: putting your script tag in end of body should also work.

Autoplay audio file on active div

I'm terrible at JS and I've tried dozens of thing to make this work, but nothing seems to work for me.
I want AUDIO1 file to play and AUDIO2 file to pause automatically when certain div element has "elementor-active" class, and vice versa.
Any help appreciated.
Here's my code:
<div id="elementor-tab-title-1601" class="elementor-active">TAB 1</div><div id="elementor-tab-title-1602" class="">TAB 2</div>
<div id="TAB1" class="active" style="display: block;">
<audio id="AUDIO1" loop="loop">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio1.ogg">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio1.mp3" type="audio/mpeg">
</audio></div>
<div id="TAB2" class="">
<audio id="AUDIO2" loop="loop">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio2.ogg">
<source src="http://localhost/grad/wp-content/uploads/2018/06/audio2.mp3" type="audio/mpeg">
</audio>
</div>

For example:
var audio_one = new Audio('PATH_TO_AUDIO_1');
var audio_two = new Audio('PATH_TO_AUDIO_2');
var timerId = setInterval(function() {
if ($('YOUR_BLOCK_SELECTOR').hasClass('active')) {
audio_one.play();
audio_two.pause();
} else {
audio_one.pause();
audio_two.play();
}
}, 250);