<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="http://vjs.zencdn.net/6.2.8/video-js.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

</head>
<body>
    <div class='container'>
{% block main %}
{% endblock %}
    </div>
  <script src="http://vjs.zencdn.net/6.2.8/video.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script>
  <script>

      function video_init() {
          return {

              init() {
                  //this.$refs.player.play()
                  //var player = videojs(this.$refs.player, {width: 480, height: 270});
                  //player.play();
                  // This code will be executed before Alpine
                  // initializes the rest of the component.
              },
              vdo(el) {
                  console.log(el)
                  var player = videojs(el, {width:480, height:270})
                  player.play()
              }, 
              search: '',
              items: ['1001', '3001'],
                get filteredItems() {
                    return this.items.filter(
                        i => i.startsWith(this.search)
                    )
                }
          }
      }
 </script>
</body>
</html>
