Vhs object is null in videojs

I am new to java script. I am trying to do a project on videojs. I am not able to get the vhs object in the below code. What wrong I am doing?

</head>
<body>
  <h1>This is a demo video</h1>

  <video-js id="demo_video" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="http://127.0.0.1:8887/video/filename.m3u8" type="application/x-mpegURL">
  </video-js>


  
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
  <script>
    var player = videojs("demo_video");
    var vhs = player.tech().vhs;
  </script>
</body>
</html>

The below code return as Uncaught TypeError: Cannot read property 'vhs' of undefined

var vhs = player.tech().vhs;