WordPress 部署 VideoJS

文章目录

最开始用的是 CKplayer 因为盗版颜色视频网站等很多用它,知道的最早,官网有中文文档,也找到了配置代码,一把梭哈就干上了,CK 强在使用 Flash 播放,使用 H5 方式很多不支持,然后就是 Dplayer 半路捡了一个,一堆乱七八糟功能,花里胡哨小孩子行为,最强的弹幕之类看不懂不想看,本来就觉得弹幕是现代最脑残的设计之一,就类似当年吹 16:9 的电脑显示屏多棒一样。去年开始各大浏览器逐渐放弃 Flash 支持,版权管理一天天严格,也宣告CK彻底没落。

Video.js 大名早有耳闻,以前什么都看不懂,没看到手把手的教程就没去管它了。好像不支持 H.265 编码的视频,很多 IPTV 源也播放不了,还是有些遗憾。

《WordPress 部署 VideoJS》

首先载入JS和CSS文件

function guihet_theme_scripts() {
wp_enqueue_style('style-videojs','https://vjs.zencdn.net/7.15.4/video-js.css', array(), '7.15.4');
wp_enqueue_script('script-videojs','https://vjs.zencdn.net/7.15.4/video.min.js', array(), '7.15.4');
}
add_action( 'wp_enqueue_scripts', 'guihet_theme_scripts' );

如果资源要放在服务器本地就把 CDN 地址改为如下形式:

get_template_directory_uri().'/css/mycss/video-js.css'

创建一个短代码并增加Html编辑器按钮

//videojs - 黑鸟博客
function videojs_html5($atts) {
extract(shortcode_atts(array(
'url' => '',
'webm' => '',
'ogv' => '',
'mp4' => '',
'width' => '',
'controls' => '',
'preload' => 'auto',
'autoplay' => 'false',
'loop' => 'false',
'muted' => '',
'poster' => '',
'class' => '',
), $atts));
if(empty($url)){
return __('you need to specify the src of the video file', 'videojs-html5-player');
}
//poster
$poster = 'poster="'.$poster.'"';
//src
$src = '<source src="'.$url.'" type="application/x-mpegURL" />';
if (!empty($webm)) {
$webm = '<source src="'.$webm.'" type="video/webm" />';
$src = $src.$webm;
}
if (!empty($ogv)) {
$ogv = '<source src="'.$ogv.'" type="video/ogg" />';
$src = $src.$ogv;
}
if (!empty($mp4)) {
$mp4 = '<source src="'.$mp4.'" type="video/mp4" />';
$src = $src.$mp4;
}
//controls
if($controls == "false") {
$controls = "";
}
else{
$controls = " controls";
}
//preload
if($preload == "metadata") {
$preload = ' preload="metadata"';
}
else if($preload == "none") {
$preload = ' preload="none"';
}
else{
$preload = ' preload="auto"';
}
//autoplay
if($autoplay == "true"){
$autoplay = " autoplay";
}
else{
$autoplay = "";
}
//loop
if($loop == "true"){
$loop = " loop";
}
else{
$loop = "";
}
//muted
if($muted == "true"){
$muted = " muted";
}
else{
$muted = "";
}
//custom style
$output = <<<EOT
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" width="100%" height="264"{$poster}{$controls}{$preload}{$autoplay}{$loop}{$muted} data-setup='{}'>
$src
</video>
EOT;
return $output;
}
add_shortcode('myvideojs','videojs_html5');
//添加HTML编辑器短代码按钮
function bolo_after_wp_tiny_mce($mce_settings)
{
?>
<script type="text/javascript">
QTags.addButton( 'qmyvideojs', 'videojs', '[myvideojs url=""]','[/myvideojs]' );
</script>
<?php
}
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');

食用

如果要播放m3u8格式的视频,只需要在文本模式下添加如下短代码,并将视频地址改为你需要添加的信息。

[myvideojs url="视频地址"]

如果要播放mp4/ogg和webm格式,就将代码中的url改为你要播放的格式,如播放mp4:

[myvideojs mp4="视频地址" autopalyer="true"]

其他参数可选可以任意添加:

  • poster=”” 填入播放器封面地址;
  • autopalyer=”true” 表示载入页面后自动播放;
  • ….

官方文档

示例:

全部为采集文章,文中的 联系方式 均不是 本人 的!

发表评论