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

news/2025/10/15 16:44:23/文章来源:https://www.cnblogs.com/funwithwords/p/19143729

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

<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.mzph.cn/news/937640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CEF关闭流程

整理了一下之前写的cef推荐的关闭流程的文档 参考文档和实际demo来看,关闭流程离屏渲染和非离屏渲染时不同的,主要区别在于非离屏渲染有一个cef自建的窗口,非离屏渲染的退出和这个窗口密切相关。 CefBrowserHost::T…

AI一周资讯 251005-251015

OpenAI 2025开发者大会:多款新模型与工具重磅发布 OpenAI在2025年开发者大会上发布了一系列新模型和新工具。AgentKit是面向开发者和企业构建、部署和优化智能体的工具集,含Agent Builder、Connector Registry等组件…

2025 年中空百叶源头厂家最新推荐排行榜:聚焦国内优质供货商,助力客户精准选购可靠产品光能/光伏/电动/光动中空百叶厂家推荐

随着建筑门窗行业对遮阳、节能与采光需求的不断提升,中空百叶产品市场需求持续增长,但市场上厂家资质、产品质量差异显著。部分厂家技术落后、产能不足,难以保障大型项目供货;还有些厂家售后体系不完善,导致客户采…

2025年学校家具定制厂家最新权威推荐榜:全屋定制/衣柜/厨柜/酒柜/鞋柜/猫柜/酒店办公家具/电视柜/书包柜/图书架/宿舍上下床

2025年学校家具定制厂家最新权威推荐榜:全屋定制/衣柜/厨柜/酒柜/鞋柜/猫柜/酒店办公家具/电视柜/书包柜/图书架/宿舍上下床随着教育现代化进程的加速推进,学校家具定制行业正迎来新一轮发展机遇。2025年,教育机构对…

075_尚硅谷_位运算深度讲解

075_尚硅谷_位运算深度讲解1.2&3的运算过程和结果 2.2|3的运算过程和结果 3.2^3的运算过程和结果 4.-2^2的运算过程和结果 5.两个位移运算符

iOS框架内存中占用很高的ttc文件是否正常

1)iOS框架内存中占用很高的ttc文件是否正常2)Constant Buffer在移动端的限制是多少这是第448篇UWA技术知识分享的推送,精选了UWA社区的热门话题,涵盖了UWA问答、社区帖子等技术知识点,助力大家更全面地掌握和学习…

Linux配置SSH名称通信

A主机 源端 1、执行ssh-keygen -t rsa //生成密钥对 2、ssh-copy-id -i /root/id_rsa_host4.pub root@38.47.106.144 //将公钥传输给B主机 3、 在本机创建 SSH 别名(~/.ssh/config) 把下面内容追加到 /root/.ssh…

cors跨域疑问解决

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

D. Not Alone

View PostD. Not AloneD. Not Alone Problem - D - Codeforces 处理一:\(b_i = b_{(i+m-2)\bmod m\;+1}\), 或 \(b_i = b_{i\bmod m\;+1}\) ​ 考虑将环分成多块处理,保证块长大于 \(1\)。 处理二:\(\sum_{i=1}^n |…

MPC模型预测控制:原理、设计与MATLAB实现

模型预测控制是一种先进的控制策略,特别适用于处理多变量约束控制问题。 1. MPC基本原理与核心思想 1.1 基本概念 MPC采用滚动优化和反馈校正的策略:预测模型:使用系统数学模型预测未来动态 优化求解:在每个采样时…

2025年焊接变位机厂家最新权威推荐榜:双轴变位机专业制造商,高效稳定助力智能焊接升级

2025年焊接变位机厂家最新权威推荐榜:双轴变位机专业制造商,高效稳定助力智能焊接升级随着工业4.0和智能制造的深入推进,焊接变位机作为焊接自动化系统的核心组成部分,正迎来技术升级与市场需求的爆发式增长。根据…

体育视频分析中的计算机视觉技术创新

本文详细介绍了两项基于神经网络模型的视频流增强技术,包括体育场地注册系统和影视剧片头片尾检测系统。通过密集关键点网格和双向长短期记忆网络等创新方法,显著提升了视频分析的准确性和实时性。体育视频分析中的计…

美股 SaaS 巨头如何用 Karpenter 节省 1/4 的 EC2 成本

美股 SaaS 巨头如何用 Karpenter 节省 1/4 的 EC2 成本Freshworks 采用 Karpenter 优化 AWS EKS 资源利用率,解决原有方案(Cluster Autoscaler)导致的 vCPU 仅用35%、内存54% 的低效问题。Karpenter 通过实时匹配 P…

2025年法兰罩厂家最新权威推荐榜:专业防护与精密制造,工业管道安全守护者优选品牌

2025年法兰罩厂家最新权威推荐榜:专业防护与精密制造,工业管道安全守护者优选品牌在工业管道系统中,法兰罩作为关键的防护部件,承担着防止介质泄漏、阻挡异物侵入、保护法兰连接部位的重要功能。随着2025年工业安全…

2025 年膜结构厂家最新推荐排行榜:含车棚 / 看台 / 景观等产品实力企业盘点与选择指南

当前膜结构产品在工业、公共设施、商业等领域应用愈发广泛,但行业内厂家资质、技术水平、产品质量差异显著。部分小型厂家存在生产设备落后、设计能力不足、售后保障缺失等问题,导致客户选购时易踩坑,不仅影响项目质…

题解:qoj7303 City United

题意:给出一个图,问连通子图的个数模 \(2\),保证 \(n\le 50,(u,v)\) 满足 \(|u-v|\le 13\)。 做法: 首先直接状压连通性,复杂度是贝尔数的,\(d=13\) 并通过不了。 考虑利用模 \(2\) 的性质,我定义一个集合 \(S\…

多网融合实战指南:4G、Wi-Fi与以太网的智能协同之道

为应对复杂多变的网络使用场景,融合4G的广域覆盖、Wi-Fi的高带宽接入以及以太网的稳定传输能力,已成为提升通信质量的必然趋势。本文将从实战出发,系统阐述三网智能协同的实现方式与关键策略。 本文以Air8000开发板…

最佳实践:基于Apache SeaTunnel从MySQL同步到PostgreSQL

今天和大家分享一个 简单但常见的 MySQL 到 MySQL 数据同步与合并场景案例,这个案例也是我在实际工作中遇到的问题,希望能抛砖引玉,欢迎有更丰富经验的大佬一起分享交流。作者 | 陈飞 中付支付大数据工程师 今天和大…

2025年冲压件厂家最新权威推荐榜:新能源/光伏/精密/异形/五金/铝/汽配/不锈钢/家具冲压件源头实力解析

2025年冲压件厂家最新权威推荐榜:新能源/光伏/精密/异形/五金/铝/汽配/不锈钢/家具冲压件源头实力解析随着制造业的转型升级,冲压件作为基础零部件在工业生产中的地位日益凸显。特别是在新能源、光伏、汽车制造等新兴…

完整教程:PaVeRL - SQL:基于部分匹配奖励与语言强化学习的 Text-to-SQL 技术

完整教程:PaVeRL - SQL:基于部分匹配奖励与语言强化学习的 Text-to-SQL 技术pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-fa…