wordpress中怎么集成HTML5点播m3u8格式视频

小白研究了许久，直接放代码，是不是简单很多

1.在主题根目录下function.php中加入以下代码

//m3u8格式视频
function m3u8_url($atts, $content = null) {  
extract(shortcode_atts(array(),$atts));    
return'
<video id="video" controls width="100%"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
var video = document.getElementById("video");
  if(Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource("'.$content.'");
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = "'.$content.'";
    video.addEventListener("loadedmetadata",function() {
      video.play();
    });
  }
</script>
';
}  

2.插入短代码标签

add_shortcode('m3u8','m3u8_url');
function m3u8_tags($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'm3u8', 'm3u8', '[m3u8]', '[/m3u8]' );
function shortcode() {
}
</script>
<?php
}
add_action('after_wp_tiny_mce', 'm3u8_tags');

3.后台文本

[m3u8][/m3u8]

中插入m3u8视频地址