wordpress集成dpayer，完美支持.m3u8播放| 百秀

1.主题跟目录下header.php文件<head></head>中间加入以下代码

<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

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

//dplayer播放器
function dplayer_url($atts, $content = null) {
extract(shortcode_atts(array(),$atts));
return'
<div id="dplayer" style="width: 890px; max-width: 100%; max-height: 500px; height: 100%;"></div>
<script>
    const dp = new DPlayer({
    container: document.getElementById("dplayer"),
    video: {
        url: "'.$content.'",
        type: "customHls",
        customType: {
            customHls: function(video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            },
        },
    },
});
</script>
';
}
add_shortcode('dplayer','dplayer_url');
function dplayer_tags($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'dpayer', 'dplayer', '[dplayer]', '[/dplayer]' );
function shortcode() {
}
</script>
<!--?php }
add_action('after_wp_tiny_mce', 'dplayer_tags');

3.后台文本

[dplayer][/player]

中插入m3u8视频地址

生成海报

作者：百秀，转载请注明。

WordPress