WordPress纯代码部署VideoJs视频播放器

Gavin Wu 2022年03月03日 9:03 Wordpress 914 Views

WordPress纯代码部署VideoJs视频播放器|微言心语
wordpress 纯代码部署视频播放器——VideoJs视频播放器。支持m3u8/MP4/WebM和Ogg格式。Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

全局引用

1
//cdn.bootcss.com/video.js/5.11.2/alt/video-js-cdn.min.css
1
//cdn.bootcss.com/video.js/5.11.2/alt/video.novtt.min.js

打开主题functions.php文件,添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
function videojs_html5($atts) {
extract(shortcode_atts(array(
    'url' => '',
    'webm' => '',
    'ogv' => '',
    'width' => '',
    'controls' => '',
    'preload' => 'auto',
    'autoplay' => 'false',
    'loop' => '',
    'muted' => '',
    'poster' => '',
    'class' => '',
), $atts));
if(empty($url)){
    return __('you need to specify the src of the video file', 'videojs-html5-player');
}
//src
$src = '<source src="'.$url.'" type="video/mp4" />';
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;
}
//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 = "";
}
//poster
if(!empty($poster)) {
    $poster = ' poster="'.$poster.'"';
}
$player = "videojs" . uniqid();
//custom style
$style = '';
if(!empty($width)){
    $style = <<<eot
    <style>
    #$player {
        max-width:{$width}px;
    }
    </style>
EOT;
}
$output = <<<eot
<video id="$player" class="video-js vjs-default-skin"{$controls}{$preload}{$autoplay}{$loop}{$muted}{$poster} data-setup='{"fluid": true}'>
    $src
</video>
$style
EOT;
return $output;
}
add_shortcode('videojs_video','videojs_html5');

使用说明

有以下几种插入视频方式

1
[videojs poster="视频封面" url="视频地址"]
1
[videojs poster="视频封面" mp4="视频地址"]
1
[videojs_video url="这里输入视频的 URL 地址"]

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Top