{"id":16665691,"url":"https://github.com/zmmbreeze/deadsimplevideoplayer","last_synced_at":"2025-03-23T14:31:31.978Z","repository":{"id":8674855,"uuid":"10332821","full_name":"zmmbreeze/DeadSimpleVideoPlayer","owner":"zmmbreeze","description":"Dead simple html5 Video player.","archived":false,"fork":false,"pushed_at":"2013-06-04T09:24:18.000Z","size":6640,"stargazers_count":38,"open_issues_count":0,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-18T21:15:15.597Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://zencode.in/DeadSimpleVideoPlayer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zmmbreeze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-28T10:03:22.000Z","updated_at":"2025-01-16T01:31:18.000Z","dependencies_parsed_at":"2022-09-05T00:30:25.127Z","dependency_job_id":null,"html_url":"https://github.com/zmmbreeze/DeadSimpleVideoPlayer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmmbreeze%2FDeadSimpleVideoPlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmmbreeze%2FDeadSimpleVideoPlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmmbreeze%2FDeadSimpleVideoPlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmmbreeze%2FDeadSimpleVideoPlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zmmbreeze","download_url":"https://codeload.github.com/zmmbreeze/DeadSimpleVideoPlayer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245115864,"owners_count":20563250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T11:08:03.040Z","updated_at":"2025-03-23T14:31:27.731Z","avatar_url":"https://github.com/zmmbreeze.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"HTML5 Video调研\n=========\n\n## 控制条与全屏幕播放\n\niPhone不支持控制条，且点击后直接全屏播放（不会在网页内播放）。android浏览器，大部分都支持控制条，点击控制条上的播放按钮会直接播放，点击视频部分或是全屏幕按钮会全屏幕播放（有些浏览器点击视频部分也不一定全屏幕播放）。控制条上的外观也各有不同，播放按钮、进度条、和最大化按钮是几乎都有的，播放状态指示器和音量控制则不一定有。\n\n比较悲惨的是，android如果不默认设置显示控制条，则会永远不显示。故有些浏览器就会不能全屏播放（不包括用使用fullscreen api）。`fullscreen api`目前还在草案阶段，支持情况很差不建议使用。所以android机型目前几乎不支持通过js来激活全屏播放。\n\n## 预览图\n\niPhone支持预览图，但是透明图片会被默认加上黑色背景。android有很多特殊情况，最新版UC浏览器、Android Chrome是支持预览图的（且背景色是透明的），但是低版本android的默认浏览器则不支持。\n\n## 高宽\n\n如果不设置默认的高宽，iPhone会自适应初始的高宽。而android浏览器则大多情况下是有个初始高宽，播放后又获取视频真实宽度然后修改自己的高宽，容易导致页面排版变乱。部分android浏览器是等待一段时间后才变成真正的高宽（不需要播放，估计是浏览器在这段时间内从服务器读取的宽高）。情况比较悲观，所以一定要设置默认高宽，避免排版悲剧。\n\n另外有个很重要的bug：在低版本的android浏览器中，高宽如果小到一定程度（例如无法显示所有控制条和播放按钮的情况），则这两个较小的高宽会失效（或显示地很奇怪）。所以在限定一个较小高度时可以用一个外部容器设置高宽并`overflow:hidden`。\n\n## 自动播放\n\niPhone不支持自动播放，android上UC浏览器与高版本的默认浏览器是支持自动播放，但是低版本的默认浏览器和非最新版的chrome则不支持。且有些支持的浏览器有很严重的bug：播放之后页面卡死，不显示视频只显示页面。只能点击“撤销”按钮才能回到原来的界面。不推荐使用！\n\n## 编码与格式\n\n目前测试的结果中：`type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'`在几乎所有的android（版本2.1以上）和iPhone上都可以播放的。值得注意的是：iPhone的浏览器对提供mp4的server端有一定要求，一般的静态server是满足不了。这估计和`Content-Type`[标头不正确](http://www.html5rocks.com/zh/tutorials/video/basics/#toc-markup)和Apple自己的[HTTP Live Streaming (HLS) Protocol](http://developer.apple.com/resources/http-streaming/)有些关系。\n\n## Javascript与事件支持\n\n总体来说iPhone与android的支持情况各有优劣。使用这些api之前一定要做好特征检测，不然很容易导致bug。例如：iPhone是不支持video.play()来激活播放的，但是它有个特点是即使被其他元素遮住，点击它所在的那个区域也是可以播放的。\n\n## 支持情况概览\n\nAndroid 2.3+的默认浏览器基本都支持mp4格式的video标签，但对全屏支持不全，且都无法通过js激活全屏。旧版本还存在一些[bug](http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/)。iPhone 3.2+的默认浏览器也支持mp4格式的video标签（默认打开即调用默认播放器全屏播放，且无法通过js来播放）。\n\n## H.264简介\n\nH.264/MPEG-4第10部分，或称AVC（Advanced Video Coding，高级视频编码），是一种视频压缩标准，一种被广泛使用的高精度视频的录制、压缩和发布格式。第一版标准的最终草案于2003年5月完成。\n\nH.264/MPEG-4 AVC是一种面向块的基于运动补偿的编解码器标准。由ITU-T视频编码专家组与ISO/IEC联合工作组——即动态图像专家组（MPEG）——联合组成的联合视频组（JVT，Joint Video Team）开发。因ITU-T H.264标准和 ISO/IEC MPEG-4 AVC标准（正式名称是ISO/IEC 14496-10 — MPEG-4第十部分，高级视频编码）有相同的技术内容，故被共同管理。\n\nH.264标准可以被看作一个“标准家族”，成员有下面描述的各种配置（profile）。一个特定的解码器至少支持一种，但不必支持所有的。解码器标准描述了它可以解码哪些配置。在HTML的`source`标签的`type`属性中可以制定所使用的H.264的配置(profile)：\n\n```html\n\u003c!-- H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container --\u003e\n\u003csource src='video.mp4' type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'\u003e\n\u003c!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container --\u003e\n\u003csource src='video.mp4' type='video/mp4; codecs=\"avc1.58A01E, mp4a.40.2\"'\u003e\n\u003c!-- H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container --\u003e\n\u003csource src='video.mp4' type='video/mp4; codecs=\"avc1.4D401E, mp4a.40.2\"'\u003e\n\u003c!-- H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container --\u003e\n\u003csource src='video.mp4' type='video/mp4; codecs=\"avc1.64001E, mp4a.40.2\"'\u003e\n```\n\ncodec是“[编解码器](http://zh.wikipedia.org/wiki/%E7%BC%96%E8%A7%A3%E7%A0%81%E5%99%A8)”的英文翻译。\n\n### 视频转换\n\n这里推荐使用[HandBrake](http://handbrake.fr/)来转换视频，因为它可以选择使用那种profile。步骤如下：\n\n1. 菜单 File \u003e Source 选择你要转换的视频\n2. 选择 Format 为MP4，选中“Web Optimized”勾选框\n3. 进入video标签，选择H.264 Profile为“Baseline”，level为“3.0”\n4. 进入audio标签，选择Encoder为AAC(faac)\n\n这样得到的转换后视频符合`video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"`格式。\n\n## 具体方案\n\n按照目前的支持情况，需要针对iPhone和android做不同的处理。大概流程为：\n\n1. 首先用javascript判断浏览器能否播放`video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"`格式\n2. 如果能播放，则显示封面预览图和播放按钮\n    1. 在iPhone 3.2+下点击直接全屏幕播放\n    2. 在android 2.3+下点击进入一个新页面播放。新页面中的播放器框会更大些，且显示播放器默认控制条，方便用户手动最大化\n3. 如果浏览器不能播放，则仅仅显示封面图片\n\n这个方案需要浏览器支持javascript，预估能cover到大多数“高端浏览器（iphone \u0026 android）”。这里有一个简单的[demo](http://nodejs.in/DeadSimpleVideoPlayer/)。\n\n## 工具与参考链接\n\n* [The State Of HTML5 Video](http://www.longtailvideo.com/html5/) 目前最全的video支持状况表\n* [can I use video](http://caniuse.com/video)\n* [video for every body](http://camendesign.com/code/video_for_everybody) 用flash实现的video兼容方案，不过我们不适用\n* [HTML5视频教程](http://www.html5rocks.com/zh/tutorials/video/basics/#toc-markup)\n* [Web specifications support in Opera products](http://www.opera.com/docs/specs/productspecs/)\n* [easyhtml5video](http://easyhtml5video.com/) 转换视频格式的工具\n* [很多有用的转码工具](http://www.broken-links.com/2010/07/30/encoding-video-for-android/)\n* [android版本占比](http://developer.android.com/about/dashboards/index.html)\n* [Unsolved HTML5 video issues on iOS](http://blog.millermedeiros.com/unsolved-html5-video-issues-on-ios/)\n* [Dive into HTML5](http://diveintohtml5.info/video.html)\n* 几个简单的播放器：[MediaElement.js](http://mediaelementjs.com/)、[videojs](http://www.videojs.com/)\n* [视频编解码 wiki](http://zh.wikipedia.org/wiki/%E8%A7%86%E9%A2%91%E7%BC%96%E8%A7%A3%E7%A0%81%E5%99%A8)\n* [H.264 wiki](https://zh.wikipedia.org/wiki/H.264/MPEG-4_AVC)\n* [HTML5 source标签标准](http://dev.w3.org/html5/spec-preview/the-source-element.html)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzmmbreeze%2Fdeadsimplevideoplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzmmbreeze%2Fdeadsimplevideoplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzmmbreeze%2Fdeadsimplevideoplayer/lists"}