간단하게 만들어 보았습니다.

기존에 vimeo 플레이어게시판을 hls로 변형하였습니다.

wr_link1 에 sample 링크 

https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

view.skin.php

[code]

<script src='https://d33wubrfki0l68.cloudfront.net/js/9012aa6cdcc02be8d7cbd62c6f12aff976c2d83b/dist/hls.js'></script>

[/code]

[code]

<script>
      var video = document.getElementById('video');      
      if (Hls.isSupported()) {
        var hls = new Hls({
          debug: true,
        });
        hls.loadSource("<?php echo $view['wr_link1'];?>");
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.muted = true;
          video.play();
        });
      }
      // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
      // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
      // This is using the built-in support of the plain video element, without using hls.js.
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = "<?php echo $view['wr_link1'];?>";
        video.addEventListener('canplay', function () {
          video.play();
        });
      }
    </script>

[/code]

[code]

영상위치

<video id="video" width='100%' height='auto' ></video>

[/code]