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

知更鸟 2022年1月30日09:40:31WordPress1 1.5K阅读模式

M3U8流媒体目前很流行,可将视频分割成多个部分,减轻服务器负担,加快播放速度,但很少看到有完整的 WordPress 主题集成播放M3U8流媒体的教程,这里写个简单的教程供参考。文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

利用DPlayer播放组件,通过短代码实现M3U8流媒体视频播放。文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

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

集成DPlayer播放M3U8流媒体

文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

下载所需文件

使用方法:

将解压后的dplayer文件夹上传添加到当前主题目录中:文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

打开主题函数模板functions.php文件,在最后添加:文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

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

编辑文章时添加短代码文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

M3U8视频短代码:文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

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

MP4视频短代码:文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

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

需要注意的是,要保证dplayerJS文件在短代码前加载,一篇文章只能加一个视频短代码。文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

想实现更多的设置:访问DPlayer官网 查看文档。文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

或者使用文章最后推荐的插件,添加多个视频地址,实现分集播放。文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html


基本代码:

其实还是非常简单,加载相关JS脚本,通过短代码加载播放配置文件。文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

展开收缩
文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html
// 加载所需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>";
}

文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

凤凰卫视视频流地址:文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

https://playtv-live.ifeng.com/live/06OLEEWQKN4.m3u8文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

 文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html


相关插件推荐Mine Video Player 可以说是功能最好的视频播放插件。文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

 文章源自知更鸟-https://zmingcx.com/wordpress-dplayer.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
WordPress 评论显示用户角色 WordPress

WordPress 评论显示用户角色

通过本文的方法,可以在WordPress每条评论显示注册用户角色标签。 代码一,自动在评论者名称后面添加 代码添加到当前主题函数模板 functions.php 中: if ( ! class_exi...
用小工具创建 WordPress 超级菜单 WordPress

用小工具创建 WordPress 超级菜单

所谓的超级菜单,就是有别于正常样式简单的 WordPress 菜单,添加更加丰富的自定义内容,在WordPress后台安装插件页面搜索”mega menu“,会找到一堆相关的插件。 为了让菜单样式有变...
在 WordPress 后台直接复制文章 WordPress

在 WordPress 后台直接复制文章

在 WordPress 后台文章列表中,如果能直接复制一篇文章或页面,然后重新编辑后发表,是不是很方便。那为什么不全选复制文章内容,然后粘贴到新建文章中呢?这是因为这样做仅复制了文章内容,并未同时把原...
评论  1  访客  1
    • maqingxi
      maqingxi 5

      这个功能太帅了,新建个页面,可作在线电台用。 :wink:

    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定