javascripthtmljqueryjwplayer

Blank Video Player

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>
Solution

  • 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>