Player not working, using custom code

Ronald3217 commented 1 week ago

As the title says, the player does not work when I try to create the player using a click event on an HTML element. It used to work fine, now even with a basic example it does not work for me. I should clarify that it works fine when the HTML element is in the DOM, but when the HTML element is created from an event, the player goes black.

What I want to do is the following:

Element.addEventListener("click",()=>{
  PlayerContainer.innerHTML = "";
  PlayerContainer.innerHTML = `
      <style>
          #player, #player div {
              width: 100%;
              max-height: 100%;
              height: 100%;
              margin: 0;
              padding: 0;
          }
          #player iframe {
              width: 100% !important;
              max-height: 100% !important;
              height: 100% !important;
          }
      </style>
      <div id="player" class="webtor" />
  `;
  WebTorLoad({ src: video.id, poster: backdrop });
  return;
})

function WebTorLoad({ src, poster }) {
    window.webtor = window.webtor || [];
    window.webtor.push({
        id: 'player',
        magnet: src,
        poster: poster,
        subtitles: [
            {
                srclang: 'en',
                label: 'test',
                src: 'https://raw.githubusercontent.com/andreyvit/subtitle-tools/master/sample.srt',
                default: true,
            }
        ],
        lang: 'en',
    });
}

I leave two example codes, the first is what I want, and the second is how it works for me.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebTor Video Player</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }
        #player, #player div {
            width: 100%;
            max-height: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;
        }
    </style>
    <div id="player" class="webtor">
        <!-- <video 
            src="magnet:?xt=urn:btih:A0DE5888B58D2D1E9F4673311924B1703BE610CA&dn=Meet+Me+Next+Christmas+%282024%29+%5B720p%5D+%5BYTS.MX%5D&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Fopen.tracker.cl%3A1337%2Fannounce&tr=udp%3A%2F%2Fp4p.arenabg.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.torrent.eu.org%3A451%2Fannounce&tr=udp%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Fopen.stealth.si%3A80%2Fannounce&tr=udp%3A%2F%2Fipv4.tracker.harry.lu%3A80%2Fannounce&tr=https%3A%2F%2Fopentracker.i2p.rocks%3A443%2Fannounce"
            poster='https://image.tmdb.org/t/p/original/JtN7Q03S3oq7A4KZ7Z3I7m3osP.jpg'
            controls
            fullscreen
            duration
            chromecast
            ></video> -->
    </div>
    <script>
        window.webtor = window.webtor || [];
        window.webtor.push({
            id: 'player',
            magnet: "magnet:?xt=urn:btih:A0DE5888B58D2D1E9F4673311924B1703BE610CA&dn=Meet+Me+Next+Christmas+%282024%29+%5B720p%5D+%5BYTS.MX%5D&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Fopen.tracker.cl%3A1337%2Fannounce&tr=udp%3A%2F%2Fp4p.arenabg.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.torrent.eu.org%3A451%2Fannounce&tr=udp%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Fopen.stealth.si%3A80%2Fannounce&tr=udp%3A%2F%2Fipv4.tracker.harry.lu%3A80%2Fannounce&tr=https%3A%2F%2Fopentracker.i2p.rocks%3A443%2Fannounce",
            poster: 'https://image.tmdb.org/t/p/original/JtN7Q03S3oq7A4KZ7Z3I7m3osP.jpg',
            subtitles: [
                {
                    srclang: 'en',
                    label: 'test',
                    src: 'https://raw.githubusercontent.com/andreyvit/subtitle-tools/master/sample.srt',
                    default: true,
                }
            ],
            lang: 'en',
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
</body>

</html>

This works but not like i want

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebTor Video Player</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }
        #player, #player div {
            width: 100%;
            max-height: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;
        }
    </style>
    <div id="player" class="webtor">
        <video 
            src="magnet:?xt=urn:btih:A0DE5888B58D2D1E9F4673311924B1703BE610CA&dn=Meet+Me+Next+Christmas+%282024%29+%5B720p%5D+%5BYTS.MX%5D&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Fopen.tracker.cl%3A1337%2Fannounce&tr=udp%3A%2F%2Fp4p.arenabg.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.torrent.eu.org%3A451%2Fannounce&tr=udp%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Fopen.stealth.si%3A80%2Fannounce&tr=udp%3A%2F%2Fipv4.tracker.harry.lu%3A80%2Fannounce&tr=https%3A%2F%2Fopentracker.i2p.rocks%3A443%2Fannounce"
            poster='https://image.tmdb.org/t/p/original/JtN7Q03S3oq7A4KZ7Z3I7m3osP.jpg'
            controls
            fullscreen
            duration
            chromecast
            ></video>
    </div>
    <!-- <script>
        window.webtor = window.webtor || [];
        window.webtor.push({
            id: 'player',
            magnet: "magnet:?xt=urn:btih:A0DE5888B58D2D1E9F4673311924B1703BE610CA&dn=Meet+Me+Next+Christmas+%282024%29+%5B720p%5D+%5BYTS.MX%5D&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Fopen.tracker.cl%3A1337%2Fannounce&tr=udp%3A%2F%2Fp4p.arenabg.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.torrent.eu.org%3A451%2Fannounce&tr=udp%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Fopen.stealth.si%3A80%2Fannounce&tr=udp%3A%2F%2Fipv4.tracker.harry.lu%3A80%2Fannounce&tr=https%3A%2F%2Fopentracker.i2p.rocks%3A443%2Fannounce",
            poster: 'https://image.tmdb.org/t/p/original/JtN7Q03S3oq7A4KZ7Z3I7m3osP.jpg',
            subtitles: [
                {
                    srclang: 'en',
                    label: 'test',
                    src: 'https://raw.githubusercontent.com/andreyvit/subtitle-tools/master/sample.srt',
                    default: true,
                }
            ],
            lang: 'en',
        });
    </script> -->
    <script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
</body>

</html>

vintikzzz commented 1 week ago

Hi, you can check examples here https://webtor.io/embed/example

Ronald3217 commented 4 days ago

Hi, you can check examples here https://webtor.io/embed/example

Thanks for your reply, but I tried with the examples the layout has the same problem, I managed to implement it even though it doesn't take 100% of the height, but it was the best way without having that problem with the UI.

I added a screenshot.

WEBTOR_EXAMPLE_LAYOUT_ERROR

webtor-io / embed-sdk-js

Player not working, using custom code #109