前言

刚弄好这个页面的时候,我就兴奋的在博客看了一晚的电影,哈哈哈,在博客里看电影😎是真的爽快!

预览

效果如下:
页面效果图

新建pug模板

新建themes\butterfly\layout\includes\page\video.pug文件,内容如下:

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
//if top_img === false
// h1.page-title= page.title
.video_frame.video_loaded(style="position: relative;")
button.fullscreen_btn(title="全屏按钮" onclick="enterFullscreen(document.getElementById(\"video-iframe\"))")
img(src="https://itch.io/static/images/enlarge.svg?1673683293")
#video-select.video-select
hr
h3= 视频列表
.videos
if site.data.video
each i,index in site.data.video
div(class="myvideo" onclick=`javascipt:selectVideo(`+index+`)`)
div(id=`video-item-`+index class="video-item" data-src=url_for(i.link))
a(href="#video-select")
img.video-item-cover(src=url_for(i.cover))
.video-desc
.video-title
a(href="#video-select")= i.title
.video-info= i.description
.video-platform-icon
each val,key in i.platform
if val == "bilibili"
i.fa-brands.fa-bilibili
else if val == "youtube"
i.fa-brands.fa-youtube
else if val == "internet"
i.fa-brands.fa-internet-explorer
else if val == "vpn"
i.fa-solid.fa-earth-americas

style.
.videos{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
@media screen and (max-width: 1200px){
.videos{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
}
@media screen and (max-width: 900px){
.videos{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
}
@media screen and (max-width: 600px){
.videos{
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
}
.myvideo{
position: relative;
width: 100%;
border: 1px solid var(--mj-card-border);
border-radius: 12px;
background-color: #fff;
}
.video-item{
overflow: hidden;
height: 160px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.video-item img {
position: relative;
width: 100%;
margin: 0 !important;
height: 100%;
transform: scale(1.0);
transition: .3s;
object-fit: cover;
}
.myvideo:hover .video-item img {
transition: .3s;
transform: scale(1.1);
}
.video-title{
padding: 5px 10px;
font-size: 18px;
font-weight: bold;
}
.video-info{
font-size: 14px;
padding: 0 10px;
color: var(--mj-secondtext);
}
.video-select{
position:relative;
width:100%;
height:0;
padding-bottom:75%;
}
.video-select iframe{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
border-radius: 12px;
}

button.fullscreen_btn {
opacity: .4;
position: absolute;
bottom: -42px;
right: 0;
margin: 8px;
font-size: 16px;
display: block;
transition: opacity 0.4s;
background: none;
padding: 0;
border: 0;
cursor: pointer;
z-index: 1;
}
button.fullscreen_btn:hover {
opacity: .8;
}
button.fullscreen_btn img {
display: block;
width: 30px;
height: 30px;
}

#page {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
#page .page-title {
display: none;
}
#page .author-content-item .card-content .banner-button-group .banner-button:hover {
color: var(--anzhiyu-white);
border-radius: 20px !important;
}

/* 评论 */
.tk-expand,
.tk-comments-container>.tk-comment,
.tk-submit:nth-child(1){
background: var(--card-bg);
border: 1px solid #e0e3ed;
box-shadow: 0 5px 10px rgb(189 189 189 / 10%);
transition: all .3s ease-in-out;
border-radius: 12px;
}

.tk-comments-container>.tk-comment:hover,
.tk-submit:nth-child(1):hover {
border-color: var(--style-border-hover);
}

.tk-submit {
padding: 20px 10px 0;
}

.tk-comments-container>.tk-comment {
padding: 15px;
}

.tk-comments-no {
background: var(--card-bg);
border: 1px solid #e0e3ed;
box-shadow: 0 5px 10px rgb(189 189 189 / 10%);
transition: all .3s ease-in-out;
border-radius: 12px;
}
.tk-comments-no:hover {
border-color: var(--style-border-hover);
}

#page > div.videos > div.myvideo > div.video-desc > div.video-title {
border-bottom: var(--style-border);
}
#page > div.videos > div.myvideo > div.video-desc > div.video-info {
border-bottom: var(--style-border);
}
#page > div.videos > div.myvideo > div.video-desc > div.video-platform-icon {
padding: 0 10px;
}
#page > div.videos > div.myvideo > div.video-desc > div.video-platform-icon > i {
margin-right: 10px;
}
!= page.content

如果不想要这个全屏按钮,可以直接将下面的这段代码删掉即可,或者,你只是想替换全屏按钮的图片,那你可以直接将下面的url替换成你的图片url即可:

button.fullscreen_btn(title=”全屏按钮” onclick=”shine.enterFullscreen(document.getElementById("video-iframe"))”)
img(src=”https://itch.io/static/images/enlarge.svg?1673683293”)

引入页面,修改 _config.butterfly.yml 主题配置文件,修改内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
menu:
# Home: / || fas fa-home
文库:
文章列表: /archives/ || fas fa-archive
全部标签: /tags/ || fas fa-tags
全部分类: /categories/ || fas fa-folder-open
友链:
友情链接: /link/ || fa-solid fa-user-group
友链鱼塘: /fcircle/ || fa-solid fa-fish-fins
留言信箱: /messageboard/ || fa-solid fa-pencil
娱乐休闲:
图库: /gallery/ || fa-solid fa-image
分享: /myshared/ || fa-solid fa-share
+ 放映厅: /video/ || fa-solid fa-circle-play
电玩城: /game/ || fa-solid fa-gamepad
我的:
本站: /about/ || fa-solid fa-address-card
书籍: /mybook/ || fa-solid fa-book
音乐: /music/ || fa-solid fa-music

注册页面,修改 themes\butterfly\layout\page.pug 文件,修改内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
extends includes/layout.pug

block content
#page
if top_img === false
h1.page-title= page.title

case page.type
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
when 'categories'
include includes/page/categories.pug
+ when 'video'
+ include includes/page/video.pug
default
include includes/page/default-page.pug

if page.comments !== false && theme.comments && theme.comments.use
- var commentsJsLoad = true
!=partial('includes/third-party/comments/index', {}, {cache: true})

新建hexo页面

在博客项目根目录中运行如下命令来创建放映厅页面:

1
hexo new page video

页面内容如下:

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
---
title: 📺 放映厅
date: 2020-07-17 20:54:09
comment: true
top_img: /img/fyt.webp
showToc: true
aside: false
type: "video"
---

<script src="https://unpkg.com/jquery@latest/dist/jquery.min.js"></script>
<script>
function selectVideo(id){
var src=$("#video-item-"+id).attr("data-src");
$("#video-select").html("<iframe id='video-iframe' src='"+src+"' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen='true'> </iframe>");
var iframe = document.getElementById("video-select")
if(iframe.attachEvent){
iframe.attachEvent("onreadystatechange", function() {
if (iframe.readyState === "complete" || iframe.readyState == "loaded") {
iframe.detachEvent("onreadystatechange", arguments.callee);
if (document.getElementsByClassName('video-mirror').length>0) {
console.log("1true")
$(".video-mirror").attr("style","transform:scaleX(-1);")
}
}
});
}else{
iframe.addEventListener("load", function() {
this.removeEventListener("load", arguments.call, false);
if (document.getElementsByClassName('video-mirror').length>0) {
console.log("2true")
$(".video-mirror").attr("style","transform:scaleX(-1);")
}
}, false);
}
}
$(document).ready(selectVideo(0));
</script>

新建视频数据yml文件

新建source_data\video.yml文件,内容如下:

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
- cover: /img/afd2zzjx.webp
time: 2022/03/10
link: //player.bilibili.com/player.html?aid=391433861&bvid=BV1jd4y1Y7bK&cid=929790029&page=1
title: 《阿凡达2水之道》万字解析!
description: 《阿凡达2水之道》万字解析!能否再次震撼影史!谜团脑洞解答!
platform:
- bilibili
- cover: https://i.ytimg.com/vi/UsIYr1LeWU0/hq720.webp
time: 2022/03/10
link: https://www.youtube.com/embed/UsIYr1LeWU0
title: 阿凡达2的魔鬼细节
description: 【阿凡达2】的魔鬼细节,来自Yutube。
platform:
- youtube
- vpn
- cover: /img/blender_osm.webp
time: 2022/12/16
link: //player.bilibili.com/player.html?aid=776309121&bvid=BV1s14y1N7pp&cid=925522874&page=1
title: 《致命充电》-Blender官方工作室又放大招了!2022年度开源电影
description: CHARGE(致命充电)是一部开放式电影,由Blender制作。
platform:
- bilibili
- cover: /img/afa1.webp
time: 2022/12/30
link: https://xiaoheimi.net/player/?url=https://m3u.haiwaikan.com/xm3u8/1b2a0df9ad9d69452d051eca25203f246455b47e70081b848f7c308f11b0587f9921f11e97d0da21.m3u8&next=
title: 《阿凡达1》电影
description: 给大伙儿找到的免费资源,直接在博客就能看。
platform:
- internet
- vpn
- cover: /img/afanda.webp
time: 2022/12/30
link: https://xiaoheimi.net/player/?url=https://m3u.haiwaikan.com/xm3u8/8dc0f368a32c1b5589343d792bda17664dad385ef8704c7f83afa4c6e3fe67189921f11e97d0da21.m3u8&next=
title: 《阿凡达2》电影
description: 给大伙儿找到的免费资源,直接在博客就能看。
platform:
- internet
- vpn
- cover: /img/qybs.webp
time: 2022/12/30
link: https://xiaoheimi.net/player/?url=https://m3u.haiwaikan.com/xm3u8/25b4fe67d66eea73ed936c1e16264a889b6db2eb09ea6520fe0b0067c4d77bee9921f11e97d0da21.m3u8&next=/index.php/vod/play/id/40078/sid/1/nid/2.html
title: 《奇异博士2》电影
description: 给大伙儿找到的免费资源,直接在博客就能看。
platform:
- internet
- vpn
参数描述固定可选参数
cover填写视频的图片的url
time填写视频的日期
link填写视频的链接
title填写视频的标题
description填写视频的文字描述
platform填写视频来源的视频bilibili,youtube,internet,vpn

如何自己添加视频

1. 获取B站等平台视频嵌入代码

在视频播放页面通常会有分享按钮,并且一般会提供链接和iframe嵌入两种分享方式:
获取视频分享的嵌入代码
复制到的嵌入代码如下:

1
<iframe src="//player.bilibili.com/player.html?aid=693725797&bvid=BV1V24y1B7HS&cid=988401006&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

2. 将嵌入代码添加到yml数据中

将嵌入代码的src值提取到link即可,因为这个视频来自bilibili,所以yml的platform中填写bilibili即可,转换后的数据如下:

1
2
3
4
5
6
7
- cover:
time:
link: //player.bilibili.com/player.html?aid=693725797&bvid=BV1V24y1B7HS&cid=988401006&page=1
title:
description:
platform:
- bilibili

全屏按钮

在自己的自定义的js中,加入下面这段代码,可以提供全屏的功能。

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
//全屏
enterFullscreen: function(el) {
console.log("进入全屏的元素", el)
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
shine.noFullscreenSupport();
}

if (shine.is_mobile()) {
window.screen.orientation.lock("landscape-primary");
}
},
//退出全屏
exitFullscreen: function(fullscreenElement) {
console.log("全屏元素", fullscreenElement)
// var doc = getIframe();
let doc = window.top.document;
if (doc.exitFullscreen) {
doc.exitFullscreen();
} else if (doc.msExitFullscreen) {
doc.msExitFullscreen();
} else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
} else if (doc.webkitExitFullscreen) {
doc.webkitExitFullscreen();
} else {
shine.noFullscreenSupport();
}
},
noFullscreenSupport: function() {
fullscreenState = !fullscreenState;
alert('您的浏览器不支持全屏.');
},
is_mobile: function() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
},

Hexo三连

1
hexo clean && hexo g && hexo s