前言

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

预览

效果如下:
页面效果图

放映厅页面
跳转至本博客中的放映厅页面查看页面效果。

新建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