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视频地址
作者:百秀,转载请注明。