Full P2P Javascript SDK Integration Example

A Full P2P Javascript SDK Integation Example

Below we provide an example HMTL page with a video.js player playing a ThetaVideoAPI hosted video with p2p stream sharing enabled.

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <title>Where To?</title>
   <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
   <script src='https://vjs.zencdn.net/7.15.4/video.js'></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script src="https://d1ktbyo67sh8fw.cloudfront.net/js/theta.umd.min.js"></script>
   <script src="https://d1ktbyo67sh8fw.cloudfront.net/js/theta-hls-plugin.umd.min.js"></script>
   <script src="https://d1ktbyo67sh8fw.cloudfront.net/js/videojs-theta-plugin.min.js"></script>
</head>

<body>
   play video boii {{.}}
   <video id="my-player" controls></video>
</body>
<script>
   const optionalHlsOpts = null;
   const optionalThetaOpts = {
      allowRangeRequests: true, // false if cdn does not support range headers  
   };
   const player = window.player = videojs('my-player', {
      autoplay: true,
      muted: false,
      techOrder: ["theta_hlsjs", "html5"],
      sources: [{
         src: "https://media.thetavideoapi.com/srvacc_3z8e4t0g2jkfr57xsz3gqvpj0/video_kzh225ce37vvpsjvpqt8kh8ki5/1631659816016.m3u8",
         type: "application/vnd.apple.mpegurl",
         label: "1080p"
      }],
      theta_hlsjs: {
         videoId: "a video id",
         userId: "a user id",
         onThetaReady: null, // optional listener
         onStreamReady: null, // optional listener
         hlsOpts: optionalHlsOpts,
         thetaOpts: optionalThetaOpts,
      }
   });
</script>

</html>