JSFiddle - React, Tailwind, and code Playground

by Roni Feldsher

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>
  <link href="https://vjs.zencdn.net/7.0.0/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.0.0/video.min.js"></script>
  <script src="https://src.litix.io/videojs/4/videojs-mux.js"></script>  
</head>
<body>
  <h1>Video</h1>
  <video id="my_video_1" class="video-js" controls preload="auto" width="640" height="268" poster="https://image.mux.com/Gxr01qQJoy202HzAq02jzhYPSmdbnIA7XJye5Oo02lHkemE/thumbnail.png?time=10">
    <source src="https://stream.mux.com/tHD0000ecLLs02ecM2r01TUtfSNlvPdW021kSEBcP1rZ01rrM.m3u8" type='application/x-mpegURL'>
  </video>
</body>
</html>

<!-- Replace current .m3u8 and check..current file has access issue-->

JavaScript

//var player = videojs('my_video_1');
 // player.play();
  
  
  const playerInitTime = Date.now();

  // EITHER initialize Mux Data monitoring like this
  videojs('my_video_1', {
    plugins: {
      mux: {
        debug: false,
        data: {
          env_key: 'i8l5aq6rrb5vssbkqp9fq8ulj', // required

          // Metadata
          player_name: 'Roni Player', // ex: 'My Main Player'
          player_init_time: playerInitTime, // ex: 1451606400000

          // Video Metadata
        video_id: '123456', // ex: 'abcd123'
        video_title: 'Blue Ink', // ex: 'My Great Video'
        video_duration: '23000', // in milliseconds, ex: 120000
        video_stream_type: 'on-demand', // 'live' or 'on-demand'
        }
      }
    }
  });