引言
前些日子由于老的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>”;
}
//alert(text);
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>
本文地址: 【小爱老师】通过Anki闪卡导入番剧视频