WordPress后台上传的视频无法正常播放怎么办?
WordPress有时要用到视频,MP4很耗费服务器资源,m3u8能够节约一部分的服务器资源,但是无法直接播放,这时很多人选择安装插件,但是插件多了影响Wordpress的性能。下面一种简单的方法跟大家分享。
1.主题跟目录下header.php文件中间加入以下代码
[php]
<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>
[/php]
2.在主题根目录下function.php中加入以下代码
//dplayer播放器
function dplayer_url($atts, $content = null) {
extract(shortcode_atts(array(),$atts));
return’
<div id=”dplayer” style=”width: 936px; max-width: 100%; max-height: 600px; 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’, ‘xx’, ‘/xx’ );
function shortcode() {
}
</script>
<?php }
add_action(‘after_wp_tiny_mce’, ‘dplayer_tags’);
3.在文章或后台插入m3u8视频地址
[dplayer][/player]
4.展示效果