WordPress 主题集成DPlayer播放M3U8流媒体

M3U8流媒体目前很流行,可将视频分割成多个部分,减轻服务器负担,加快播放速度,但很少看到有完整的 WordP…

M3U8流媒体目前很流行,可将视频分割成多个部分,减轻服务器负担,加快播放速度,但很少看到有完整的 WordPress 主题集成播放M3U8流媒体的教程,这里写个简单的教程供参考。

利用DPlayer播放组件,通过短代码实现M3U8流媒体视频播放。

WordPress 主题集成DPlayer播放M3U8流媒体

集成DPlayer播放M3U8流媒体

下载所需文件

使用方法:

将解压后的dplayer文件夹上传添加到当前主题目录中:

打开主题函数模板functions.php文件,在最后添加:

require get_template_directory() . '/dplayer/dplayer.php';

编辑文章时添加短代码

M3U8视频短代码:

[m3u8dplayer type="hls"]M3U8视频流地址[/m3u8dplayer]

MP4视频短代码:

[mp4dplayer type="flv"]MP4视频地址[/mp4dplayer]

需要注意的是,要保证dplayerJS文件在短代码前加载,一篇文章只能加一个视频短代码。

想实现更多的设置:访问DPlayer官网 查看文档。

或者使用文章最后推荐的插件,添加多个视频地址,实现分集播放。


基本代码:

其实还是非常简单,加载相关JS脚本,通过短代码加载播放配置文件。

展开收缩
// 加载所需DPlayer脚本
function dplayer_scripts() {
	wp_enqueue_script( 'DPlayer.min', get_template_directory_uri() . '/dplayer/DPlayer.min.js', array(), '', false);
	wp_enqueue_script( 'hls.min', get_template_directory_uri() . '/dplayer/hls.min.js', array(), '', false);
	wp_enqueue_script( 'flv.min', get_template_directory_uri() . '/dplayer/flv.min.js', array(), '', false);
}
add_action( 'wp_enqueue_scripts', 'dplayer_scripts' );

// M3U8短代码
add_shortcode( 'm3u8dplayer', 'm3u8dplayer_shortcode' );
function m3u8dplayer_shortcode( $atts, $content = null ) {
return "<div id='m3u8dplayer'></div>
<script>
const dp = new DPlayer({
	container: document.getElementById('m3u8dplayer'),
	video: {
		url: '" . $content . "',
		type: 'hls',
	},

	pluginOptions: {
		hls: {

		},
	},
});
</script>";
}
// MP4短代码
add_shortcode( 'mp4dplayer', 'mp4dplayer_shortcode' );
function mp4dplayer_shortcode( $atts, $content = null ) {
return "<div id='mp4dplayer'></div>
<script>
const dp = new DPlayer({
	container: document.getElementById('mp4dplayer'),
	video: {
		url: '" . $content . "',
		type: 'flv',
	}
});
</script>";
}
01
02

凤凰卫视视频流地址:

https://playtv-live.ifeng.com/live/06OLEEWQKN4.m3u8

 


相关插件推荐:Mine Video Player 可以说是功能最好的视频播放插件。

 

类别:WordPress入门

本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。

评论 (0)COMMENT

登录 账号发表你的看法,还没有账号?立即免费 注册