引言
前些日子由于老的Casio电子词典报废，但又由于时间紧迫无暇网购，便去小米专卖店购买了小爱老师作为电子词典。买到家后才发现这居然是基于安卓9的系统，作为折腾党，那怎么能不弄出点花样来？然而，在我的不懈研究下，安装APP的操作终于失败了（草！），关于这件事就放到以后再细说吧。不过我偶然发现，小爱老师中，Anki的闪卡都是HTML页面，那也就是说，可以导入视频进去观看，于是又经过了几个小时的奋战，自制的迷你视频播放页面终于完成，如图：
视频列表页面预览图↑
播放页面预览图↑
想着独乐乐不如众乐乐，于是准备在此将网页源代码和部分番剧资源分享给大家。
使用说明
使用方法十分简单，只需要下载我所分享的压缩包或者闪卡文件，将其全部上传至小爱老师即可，时间关系，具体操作方法下周更新。
这里放出闪卡的下载地址：番剧视频会不定时更新，视频内容和我最近补番在补什么相关，若想要自己制作，可以期待之后更新的制作教程。当然也不反对自行研究~
点我下载 访问码:vds9
网页代码相关
说实话十分的简单，由于本人刚接触HTML不久，对于页面的美化之类操作不是特别熟悉，因此页面较为简陋
下面放出CSS代码
@keyframes test {
0% {
opacity: 0;
transform: translateY(30px);
}
80% {
opacity: .5
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
#insidepanel {
animation: test 500ms ease-in-out forwards;
}
#watchpanel {
display: inline-block;
background: #EEEEEE;
color: #6F6F6F;
border-radius: 3%;
padding-right: 5%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
box-shadow: 10px 10px 10px #CCCCCC;
transition-duration: .5s;
}
#lst {
text-align: center;
transition-duration: .2s;
transition: all .5s ease;
font-size: 18px;
display: inline-box;
animation: test 500ms ease-in-out forwards;
}
h1 {
transition-duration: .2s;
transition: all .5s ease;
display: inline;
font-size: 25px;
font-weight: bold;
animation: test 500ms ease-in-out forwards;
}
p {
transition-duration: .2s;
transition: all .5s ease;
display: inline;
font-size: 13px;
animation: test 500ms ease-in-out forwards;
}
#vid_list {
line-height: 25px;
transition-duration: .2s;
transition: all .5s ease;
text-align: center;
animation: test 500ms ease-in-out forwards;
display: inline-block;
background: #EEEEEE;
color: #6F6F6F;
border-radius: 3%;
padding-right: 5%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
box-shadow: 10px 10px 10px #CCCCCC;
word-wrap: break-word;
}
#lst {
line-height: 25px;
word-wrap: break-word;
position: relative;
margin: 10px auto;
}
#lst:nth-child(odd) {
color: #6F6F6F;
background: #EEEEEE;
}
#lst:nth-child(even) {
background: #AAAAAA;
color: #EEEEEE;
}
input {
transition: 0.2s all;
background: #EEEEEE;
border: solid #ccc 1px;
border-radius: 3px;
}
input:hover {
cursor: pointer;
background: #D8D8D8;
}
input:active {
cursor: pointer;
background: #A2A2A2;
}
以及HTML代码：
<script>
list = "{{剧集文件名，用|分割}}";
degree = 0
function analyzlist() {
item = list.split("|");
text = "<tr id='lst'> <th> 视频名称 </th><th>播放链接</th> </tr>";
var i = 0;
for (i = 0; i < item.length; i++) {
text += "<tr id='lst'> <td> " + item[i] +
"</td> <td> <input type='button' onclick='playvid(item[i])' value='点击播放'> </td> </tr>";
}
document.getElementById("lst").innerHTML = text;
}
function playvid(url) {
document.getElementById("vid_list").style = "display: none";
document.getElementById("watchpanel").style = "";
document.getElementById("insidepanel").innerHTML = "<p>" + url + "</p><br>" +
"<video width=\"320\" height=\"240\" controls requestFullscreen> <source src=\"" + url +
"\" type=\"video/mp4\"></video><br><input type=\"button\" value=\"顺时针旋转90度\" onclick=\"rotate();\"> <input type=\"button\" value=\"返回\" onclick=\"recovery();\">";
}
function rotate() {
degree += 90;
if (degree == 360) {
degree = 0
}
document.getElementById("watchpanel").style = "transform: rotate(" + degree.toString() + "deg)";
}
function recovery() {
document.getElementById("vid_list").style = "";
document.getElementById("watchpanel").style = "display: none";
document.getElementById("insidepanel").innerHTML = "";
}
analyzlist();
//playvid("1");
</script>
<body>
<div name="vid_list" style="" id="vid_list">
<h1>视频列表</h1></br>
<p>测试版视频播放器v0.9.20.3 By 不做评论<br>若显示异常，请关闭夜间模式后再使用</p><br>
<input type="button" value="若没有列表出现点我" onclick="analyzlist()"></br>
<table name="lst" id="lst"></table>
</div>
<div name="watchpanel" id="watchpanel" style="display:none">
<div id="insidepanel">Loading</div>
</div>
</body>
