wordpress集成HTML5点播m3u8格式视频

21年08月28日

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//m3u8格式视频
function m3u8_url($atts, $content = null) {  
extract(shortcode_atts(array(),$atts));    
return'
<video id="video" controls width="100%"></video>
<script src="https://www.ay21.com/wp-content/themes/AH/js/hls.js"></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>
';
}  

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');

2.后台文本

1
[m3u8][/m3u8]

中插入m3u8视频地址

演示如下:

相关文章

给句点评吧!
loading