这是一篇早期的教程文章,里面的内容可能已经过时或废弃,请注意甄别。

发现hexo-Sakura主题中首页的右下角有一个播放按钮。


点击按钮之后就可以播放一个视频,看着这个按钮我总觉得少点什么,于是我决定给它加一个全屏功能。

绘制图标

首先打开一个像素绘图软件,这里我用的是ArtCursors,为了能够绘制出和原版一样风格的按钮,我载入了原版的图标

擦除中间的图案,然后使用吸管吸取主颜色,绘制出图标后另存为full-32x32.png备用

主题修改

JavaScript功能

打开Sakura主题根目录,打开source\js,新建一个fullscreenElement.js文件,代码如下

//从网上随便抄了点代码改了改
function $(Nid){
return document.getElementById(Nid);
}
// 进入全屏:
function entryFullScreen() {
var docE = document.documentElement;
if (docE.requestFullScreen) {
docE.requestFullScreen();
} else if (docE.mozRequestFullScreen) {
docE.mozRequestFullScreen();
} else if (docE.webkitRequestFullScreen) {
docE.webkitRequestFullScreen();
}
}
// 退出全屏
function exitFullScreen() {
var docE = document;
if (docE.exitFullscreen) {
docE.exitFullscreen();
} else if (docE.mozCancelFullScreen) {
docE.mozCancelFullScreen();
} else if (docE.webkitCancelFullScreen) {
docE.webkitCancelFullScreen();
}
}
/*全屏操作的主要方法和属性
* 1.requestFullScreen():开启全屏显示
* 不同浏览器需要添加不同的前缀
* chrome:webkit firefox:moz ie:ms opera:o
* 2.cancelFullScreen():退出全屏显示:也添加前缀,在不同的浏览器下.退出全屏只能使用document来实现
* 3.fullScreenElement:是否是全屏状态,也只能使用document进行判断*/
window.onload=function(){
var div=document.querySelector("div");
/*添加按钮的点击事件*/
/*判断是否是全屏状态*/
document.querySelector("#video-full").onclick=function(){
var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
if (fullscreenElement == null) {
entryFullScreen();
} else {
exitFullScreen();
}
}
}

ejs布局

找到layout\_partial\headertop.ejs这个文件,在id为video-container这个div中添加一个新的按钮,代码如下

<div id="video-full">
</div>
<script type="text/javascript" src="/js/fullscreenElement.js"></script>

css样式

打开source\css\style.css,为这个全屏按钮添加样式,代码如下

#video-full {
background-image:url('https://cdn.jsdelivr.net/gh/muyulong/[email protected]/img/other/[email protected]');
bottom:90px;
display:none
}

如果你不想把css变得一团糟,那么关于播放功能的部分大概在1100行左右;-)

注意事项

sakura-app.js这个文件里面貌似要加一行内容

另外,我发现只要做好url的拼接,大部分支持外链的视频都可以作为背景视频