当前位置: 首页 > 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。

http://www.hskmm.com/?act=detail&tid=31662

相关文章:

  • CEF关闭流程
  • AI一周资讯 251005-251015
  • 2025 年中空百叶源头厂家最新推荐排行榜:聚焦国内优质供货商,助力客户精准选购可靠产品光能/光伏/电动/光动中空百叶厂家推荐
  • 2025年学校家具定制厂家最新权威推荐榜:全屋定制/衣柜/厨柜/酒柜/鞋柜/猫柜/酒店办公家具/电视柜/书包柜/图书架/宿舍上下床
  • iOS框架内存中占用很高的ttc文件是否正常
  • Linux配置SSH名称通信
  • MPC模型预测控制:原理、设计与MATLAB实现
  • 2025年焊接变位机厂家最新权威推荐榜:双轴变位机专业制造商,高效稳定助力智能焊接升级
  • 体育视频分析中的计算机视觉技术创新
  • 2025年法兰罩厂家最新权威推荐榜:专业防护与精密制造,工业管道安全守护者优选品牌
  • 2025 年膜结构厂家最新推荐排行榜:含车棚 / 看台 / 景观等产品实力企业盘点与选择指南
  • 题解:qoj7303 City United
  • 多网融合实战指南:4G、Wi-Fi与以太网的智能协同之道
  • 最佳实践:基于Apache SeaTunnel从MySQL同步到PostgreSQL
  • 2025年冲压件厂家最新权威推荐榜:新能源/光伏/精密/异形/五金/铝/汽配/不锈钢/家具冲压件源头实力解析
  • 完整教程:PaVeRL - SQL:基于部分匹配奖励与语言强化学习的 Text-to-SQL 技术
  • 2025年抖音推广服务商最新权威推荐榜:专业运营团队与高转化率方案深度解析,助力品牌精准引流与爆款打造
  • 基于模糊深度信念网络(FDBN)的情感分析实现与优化
  • 2025年卷板机厂家综合推荐榜:折弯机/液压机厂家助力制造业智能化升级
  • Python 实现 Ping 功能
  • 2025年焊接机器人厂家最新权威推荐榜:激光/自动/智能/工业/国产焊接机器人系统、机器人焊接设备、汽车/钢结构/氩弧焊焊接机器人公司精选
  • 2025年保洁公司最新权威推荐榜单:专业家政服务与深度清洁口碑优选,家庭保洁、企业保洁、开荒保洁全方位解析
  • C语言学习——变量
  • RabbitMQ投递回调机制以及策略业务补偿
  • 2025年大连媒体投放公司最新权威推荐榜:覆盖传统媒体/新媒体/户外广告投放的优质服务商深度解析
  • 显卡参数对算力性能的影响
  • 多物理域协同 + 三维 CAD 联动!ADS 2025 解锁射频前端、天线设计新体验
  • win10自带锁屏壁纸和Windows聚焦壁纸路径
  • 读书笔记:时间间隔类型:轻松管理时长与时间点
  • 2025 年最新推荐!除尘器厂家权威排行榜发布,深度解析各品牌技术实力与市场口碑