Blank Video Player

Question

i have a code that im trying to set up but no matter wat its a Blank white page any idea what i may have wrong in the set up causing it not to show up? and any help fixing it owuld be amazing

        <script type="text/javascript" src="jwplayer.js"></script>
        <script type="text/javascript">
          jwplayer.key = "3SYLbRo6MN5cBDxwpZh3dl1gb0lMTUOos31M5hoAlf4=";
        </script>
        </div>
        <script>
          <script>
            <script type = "text/javascript">
              // jwplayer.key="sXW0XA1MksiJ6hYVNHKJFCtOB4qTihu2B0xyTyZoMiA=";
              jwplayer.key = 'sXW0XA1MksiJ6hYVNHKJFCtOB4qTihu2B0xyTyZoMiA=';
            </script>
      </head>
      <body>
        <div id="wrapvideo">
          <div id='player'></div>
        </div>
      </body>
    </html>
    <script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script>
    <div id="wrapvideo">
      <div id='player'></div>
    </div>
  </body>
</html>
<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script>
<script>
  var playerInstance = jwplayer("player");
  playerInstance.setup({
        skin: {
          "name": "alaska",
          "url": ""
        },
        logo: {
          "file": "",
          "position": "top-right",
          "hide": "false",
        },


        "title": "Linking to a Time Offset",
        "description": "In this demo the video starts from the beginning by default. However, if there is a time offset hash in the URL, the video will start from that time.",
        "license": "All",
        "showCode": true,
        "apiCalls": [
          "on('ready')",
          "on('firstFrame')"
        ],
        "author": {
          "name": "JW Player",
          "githubUsername": "jwplayer"
        },
        "library": "IDzF9Zmk"

      },
      const hash = window.location.hash;
      let offset = hash ? Number(window.location.hash.substr(3)) : false;
      let shouldPlay = !!hash;

      const playerInstance = jwplayer('player').setup({
        playlist: 'm3u8 DVR HERE',
        autostart: shouldPlay
      });

      playerInstance.on('firstFrame', () => {
        if (offset) {
          playerInstance.seek(offset);
        }
        offset = false;
      });

      document.getElementById('set-offset').addEventListener('click', () => {
        window.location.hash = '#t=-60';
        window.location.reload();
      });
</script>
</div>
</div>
</div>
</div>
<div id="html4" style="position:absolute; overflow:hidden; left:375px; top:203px; width:375px; height:203px; z-index:3"></div>
</body>
</html>
<div id="player"></div>
<button id="set-offset">Set -60s offset</button>
<p>Click the button to reload the page with a time offset of -60 seconds. The appends <code>#t=-60</code> to the URL.</p>

it seems to be set up wrong or missing something object would be when t=-60 is included it rewinds the stream 60 seconds on load (LIVE DVR STREAM goes back 24 hrs i want it to start on a 60 sec delay is the objective)

https://demos.jwplayer.com/linking-to-time-offset/#t=30 is the goal

Here is the updated code i cant get going

<script src="https://cdn.jwplayer.com/libraries/IDzF9Zmk.js"></script>

<div id='player'></div>
<button id="set-offset">Set 15s offset</button>
<p>Click the button to reload the page with a time offset of 15 seconds. The appends <code>#t=30</code> to the URL.</p>
<script>
  const hash = window.location.hash;
  let offset = hash ? Number(window.location.hash.substr(3)) : false;
  let shouldPlay = !!hash;

  const playerInstance = jwplayer("player").setup({

                    file: "",
                    'title': '',
                    'aspectratio': '16:9',
                    stretching: 'exactfit',
                    'bufferlength': '5',
                    'height': '203px',
                    'width': '975px',
                    'primary': 'hls',
                    'sharing':'false',

                    'autostart': 'true',
                    'wmode': 'opaque',
                    'image': '',
                    'abouttext': '',
                    'aboutlink': ''
    autostart: shouldPlay
  });

  playerInstance.on("firstFrame", () => {
    if (offset) {
      playerInstance.seek(offset);
    }
    offset = false;
  });

  document.getElementById("set-offset").addEventListener("click", () => {
    window.location.hash = "#t=15";
    window.location.reload();
  });
</script>

Is that your actual HTML? If so, there are A LOT of issues that you need to fix, such as multiple `head` and `body` elements, along with nested ` — Rory McCrossan, Jul 07 '22 at 09:56
i just cant get it figured out https://demos.jwplayer.com/linking-to-time-offset/#t=30 this is what im needing so when #t=60 is added it then auto rewinds 60 — user19500487, Jul 07 '22 at 09:58
@RoryMcCrossan Yeah im stuck lol its driving me crazyyy been working on this 3 days now with no luck lol — user19500487, Jul 07 '22 at 10:07
*If* your `jwplayer.key`s are the real ones, *you should remove them and generate new ones*. They are all exposed on StackOverflow now (even if you edit the post, since the changes are public). Always omit your apiKeys from public posts for safety :) — Doc, Jul 07 '22 at 10:51

score 0 · Accepted Answer · answered Jul 07 '22 at 12:11

0

your html is a mess, you not actually loading a video, you are missing setting the playlist to an actual video URL, to help you out here is a very basic example of what your after:

<script src="https://cdn.jwplayer.com/libraries/IDzF9Zmk.js"></script>

<div id='player'></div>
<button id="set-offset">Set 15s offset</button>
<p>Click the button to reload the page with a time offset of 15 seconds. The appends <code>#t=30</code> to the URL.</p>
<script>
  const hash = window.location.hash;
  let offset = hash ? Number(window.location.hash.substr(3)) : false;
  let shouldPlay = !!hash;

  const playerInstance = jwplayer("player").setup({
    playlist: "https://cdn.jwplayer.com/v2/media/1b02B03R",
    autostart: shouldPlay
  });

  playerInstance.on("firstFrame", () => {
    if (offset) {
      playerInstance.seek(offset);
    }
    offset = false;
  });

  document.getElementById("set-offset").addEventListener("click", () => {
    window.location.hash = "#t=15";
    window.location.reload();
  });
</script>

answered Jul 07 '22 at 12:11

Patrick Hume

2,064
1
3
11

Thats working but thats starting the DVR stream at the Beggining instead of end of the Live STream i need it to start at the end then Rewind on click any idea how i would switch that around? – user19500487 Jul 07 '22 at 16:26
maybe it needs liveSyncDuration ? – user19500487 Jul 07 '22 at 16:29
Editing my question to add what i did try to add maybe to be more customixed but its blank again too i need it -60 so it rewinds from live spot @Patrick Hume – user19500487 Jul 07 '22 at 16:37
i check the jwplayer, their plugin didn't seem to support a rewind feature, I assume you worked it out in the end because you accepted the answer if you find you still need the rewind from end function maybe check out other alternative solutions https://learningjquery.com/2015/06/jquery-video-plugins-for-streaming-your-favorite-videos – Patrick Hume Jul 09 '22 at 20:24

Blank Video Player

1 Answers1