先上代码再解释踩过的坑。
<html><head><meta charset="UTF-8"> <meta name="screen-orientation" content="landscape"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style> * { margin:0; padding:0 } .container { position:relative; width:100vw; height:100vh; background:black } video { display:block; position:absolute; left:0; top:0 } @media (orientation: landscape) {video { height:100vh } } @media (orientation: portrait) {video {height: 100vw;transform-origin: 0 0;transform: rotate(90deg) translateY(-100%);} } </style></head><body> <div class="container"><video autoplay muted controls id="video"></video> </div> <script> function main () {let list = pre.innerHTML.split(/\s/)if (!list[list.length - 1].length) list.pop()function play () {let i = Math.round(Math.random() * (list.length - 1))video.src = 'v/' + (document.title = list[i]) + '.mp4'video.muted = false; video.play()// play() failed because the user didn't interact with the document first. }play(); video.addEventListener('ended', play) } </script><pre style="display:none" id="pre"> 1009524467_nb3-1-16 </pre> <script>main()</script> </body></html>
手机上有1000多个象棋视频。相册里密密麻麻。可以闭眼选个比如a开始播放,然后总是a b c的顺序。所以用HTML video来放,每次随机取一个。
电脑上可以打开本地网页,手机上需要装浏览器,Simple HTTP Server 几百KB,安装后叫SHTTPS。bind lo这个interface的话,可以不开数据网络或WLAN. 网卡 NIC (Network Interface Card).
想:即便手机竖屏,视频也横屏显示。<meta name="screen-orientation" content="landscape">只是建议。
想旋转,video必须放在container里,它们的position和display都有讲究。旋转后video“跑了”,想回到左上角得:transform-origin: 0 0和transform: rotate(90deg) translateY(-100%);
AI告诉我100%,少了个负号,转完就不见了。
@media screen and (orientation: portrait) {...} 是条逻辑语句啊。输出为屏幕且方向为肖像。由于我们只关心屏幕,所以可以不要screen.
理解了就不怪异了。再如bash的for i in 1 2; do echo $i; done和ls; ls; ls一样是三条命令。i in 1 2是for的参数。虽然有/usr/bin/[,但bash可能用的是内置的,还有[[功能更强更安全。
用白空格split后,最后面有个空字符串,把</pre>挪到上一行后,我记得是没有了。
Math.random()取0到1之间的随机数,(0,1)还算[0,1]忘了。我记得是不含1的,但好像Math.floor(Math.random() * 3)好像会出来3。
长度为3的数组的合法下标是0, 1, 2。用round(2 * random())首先安全,其次好像更随机一点,比如1.5到2之间变2, 而不是1到1.9999999都变1。