引言

前些日子由于老的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();\”>&nbsp<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>

 

 

说点什么
欢迎留言~
支持Markdown语法
暂时没有评论。
Loading...