I’m currently working on a video player page for a website project. I’ve successfully set up the JavaScript to display a specific video using a URL in this format: ‘website.html?videoId=videotoplay’. However, I’m facing a challenge in displaying related videos below the main video based on matching tags. Each video has associated tags stored in an array in my JavaScript, and I need to find a way to iterate through the tags and display the videos with matching tags below the main video.
Below is my current JavaScript code 👇🏻👇🏻
const allVideos = [
{
id: "video1",
title: "Video 1",
preview: "video1-preview.jpg",
url: "video URL goes here",
tags: ["action", "adventure"]
},
{
id: "video2",
title: "Video 2",
preview: "video2-preview.jpg",
url: "video URL goes here"
tags: ["thriller", "mystery"]
},
];
function getUrlParameter(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
function loadVideoPage() {
const videoId = getUrlParameter('videoId');
const mainVideo = allVideos.find(video => video.id === videoId);
if (mainVideo) {
// Load the main video
const mainVideoElement = document.getElementById('main-vid');
mainVideoElement.src = mainVideo.url;
// Set the video title
const videoTitleElement = document.querySelector('.vid-name');
videoTitleElement.textContent = mainVideo.title;
// Update the tags
document.getElementById('tags').dataset.tags = mainVideo.tags.join(',');
//Calling the load
loadVideoPage();
I’ll like the videos matched to the tag of the playing video to be appended to the below html 👇🏻👇🏻(by that I mean the preview image from the above array and the title).
<div id="suggest-video">
<Img>preview image</img>
<P>title</p>
</div>
The img and p tags will be generated add filled with JavaScript.
It’s a hassle I know 😞, but please I couldn’t have gotten this far without the much help I’ve received any. Any and every help will be highly appreciated 🙏🏻. Thank you.
Smart Flamz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.