Click here to Skip to main content
15,880,967 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I've used iframe in my html page which contains the base video like this

HTML
<iframe id="iframe" poster="this.png" src="https://streamadblocker.com/e/Video_ID" width="750" height="400" allowfullscreen frameborder="0" ></iframe>


and I have other parts of the video as well which I have managed to do like this

HTML
<a class="alnk" data-src="https://streamadblocker.com/e/Video_ID">Part 2</a>


but I have not created the links like this one by one additionally I've used JS to read the file which contains all the links or src of the video and create the a tag inside a div something like this

JavaScript
const linkContainer = document.querySelector(".prtd");

fetch('urls.txt')
  .then(response => response.text())
  .then(data => {
    const urls = data.split('\n').filter(Boolean);
    const numVideos = urls.length;

    for (let i = 1; i <= numVideos; i++) {
      const link = document.createElement("a");
      link.className = "alnk";
      link.setAttribute("data-src", urls[i]);
      link.textContent = `Part ${i + 1}`;
      linkContainer.appendChild(link);
    }
  });


The main thing comes here I Now have a problem with the iframe the thing that I did is suppose I have Part 2 and 3 and 4 links of the video are there which contains data-src of the video in anchor tag which has class of ".alnk" and after clicking the Part 2 the iframe which Previoiusly had the base video src should repalce with the src in which part I click. In short when I click the Part 3 it should play the Part 3 in the iframe replacing the base Video. To achieve that i've tried this code of JS

What I have tried:

JavaScript
const videoPlayer = document.getElementById("iframe");
const partLinks = document.querySelectorAll(".alnk");

partLinks.forEach(link => {
  link.addEventListener("click", function() {
    const src = this.getAttribute("data-src");
    videoPlayer.setAttribute("src", src);
    videoPlayer.play();
  });
});

Additionally Using Video element in html it worked as the videos were on my local device but now I have hosted to the other plattform it does not play the video not even the base video then I've used iframe to embedd it

After adding this code it does not play the video on iframe additionally in the browser console it showed this error

Uncaught TypeError: Cannot read properties of undefined (reading 'isActive') at Object._userActivationHandler

Here's the full JS code which I've used In My html

JavaScript
const videoPlayer = document.getElementById("iframe");
const partLinks = document.querySelectorAll(".alnk");

partLinks.forEach(link => {
  link.addEventListener("click", function() {
    const src = this.getAttribute("data-src");
    videoPlayer.setAttribute("src", src);
    videoPlayer.play();
  });
});

Also I am new to JS I don't know errors and things that much If any one Could help I would be very Thankful 
Thank You!
Posted
Updated 11-Mar-23 13:07pm

1 solution

I was not sure, so I asked Google Search: how to play a video in an iframe - Google Search[^]

Check out this very similar question and the answers with a solution provided: https://stackoverflow.com/questions/37664896/play-videos-with-iframe-in-html[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900