做了个手机上的“视频播放器”，获益匪浅

先上代码再解释踩过的坑。

<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。

split(/\s/)可以对付\r和\n, Windows下MadEdit等可以设行结束符。我现在用Linux，不用rb了。

吐槽红米K40S。VLC和完美视频播放器都有卡顿感，自带的视频/相册没事。Via浏览器也没事。

中国象棋、JJ象棋等卡顿严重，天天象棋、王者荣耀、决战平安京等很流畅。逼得我只能看视频和打3D游戏。

再吐槽小米应用市场。iA Writer, QuickEdit, APK Export等等，我自己下载的apk不让装。应用市场里没有原版的。下了个改版的、得了金米奖的，一运行就开始装别的APP。王国保卫战5也得了金米奖、1个多G，打开后不交27元不让玩。而且看评论，交了钱也未必能玩。

再吐槽小米浏览器。看过一次象棋视频后就开始疯狂推荐，n次点击“对此话题不感兴趣”、拉黑作者等都没有用。

网页播放不支持HEVC，自带视频播放器好像可以。VLC 3.0.21不支持HEVC, ffplay支持。

最后，反正我400多买的二手，用坏了不换电池了。

哦，Unix下目录也是文件，所以在手机上新建文件夹.nomedia管用。

只指定video的height，不指定width，不会被裁剪，不用设置aspect: 16/9之类。

最后那个main()太土了哦，addEventListener('DOMContentLoaded', ...)在HTML文档完全加载和解析后触发，无需等待样式表、图片等外部资源加载完成。与window.onload事件不同，后者需要等待所有资源加载完毕才会触发。while (!(pre = getTagName('pre') ); 会阻塞。setTimeout与时间有关。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
// 使用示例
addLoadEvent(function1);
addLoadEvent(function2);

posted @ 2025-10-15 16:37 华容道专家阅读(19) 评论(0) 收藏举报

刷新页面返回顶部

Penilum meum pullo sententia Latin a est 「通过浪费时间获得快乐」

做了个手机上的“视频播放器”，获益匪浅