当前位置: 首页 > news >正文

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

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

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

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

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

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

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

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

http://www.gsyq.cn/news/21664.html

相关文章:

  • CEF关闭流程
  • AI一周资讯 251005-251015
  • 075_尚硅谷_位运算深度讲解
  • iOS框架内存中占用很高的ttc文件是否正常
  • MPC模型预测控制:原理、设计与MATLAB实现
  • 美股 SaaS 巨头如何用 Karpenter 节省 1/4 的 EC2 成本
  • 题解:qoj7303 City United
  • 基于模糊深度信念网络(FDBN)的情感分析实现与优化
  • Python 实现 Ping 功能
  • 2025年焊接机器人厂家最新权威推荐榜:激光/自动/智能/工业/国产焊接机器人系统、机器人焊接设备、汽车/钢结构/氩弧焊焊接机器人公司精选
  • 2025年保洁公司最新权威推荐榜单:专业家政服务与深度清洁口碑优选,家庭保洁、企业保洁、开荒保洁全方位解析
  • 多物理域协同 + 三维 CAD 联动!ADS 2025 解锁射频前端、天线设计新体验
  • MySQL—— 备份与恢复
  • 读书笔记:时间间隔类型:轻松管理时长与时间点
  • 2025 年最新推荐!除尘器厂家权威排行榜发布,深度解析各品牌技术实力与市场口碑
  • 实用指南:【Git】项目管理全解
  • 在浏览器播放多个视频 opencv+Nicegui
  • 达梦定时任务更新阻塞信息到表
  • 2025年千斤顶厂家最新权威推荐排行榜:液压千斤顶、机械千斤顶、电动千斤顶源头厂家综合实力深度解析
  • VKD104CR是永嘉微VINKA推出低功耗2路触摸芯片该芯片具有较高的集成度
  • STM32学习路线!600+讲课程!软硬件兼修:裸机+RTOS+LVGL+硬件设计+项目实战 (STM32多核心开发板)
  • 【2025-10-11】适应变化
  • C语言的学习——常量
  • 会充电的CANoe,高效完成即插即充(PnC)智能充电功能测试
  • Bridge 2025超详细保姆级下载安装全教程(含软件下载)
  • 2025年锅炉厂家最新权威推荐榜:燃气采暖锅炉/电热水锅炉/生物质锅炉/真空热水锅炉/蒸汽发生器全品类深度解析
  • PyAutoGUI库自动化测试脚本工具模拟键盘鼠标操作
  • 企业身份认证系统选型:Azure AD 与 Keycloak 效果详解
  • 2025 年月子会所推荐:女王臻瑷专注母婴护理 10 年,西安口碑之选的高端母婴护理服务解析
  • 国产测试用例管理工具市场格局解析:四大产品如何赋能企业数字化转型