简体   繁体   English

移动HTML5视频格式,视频大小和FPS

[英]Mobile HTML5 video format, video size and FPS

I'm about to create a mobile website using HTML5 and want to use the HTML5 video tag. 我即将使用HTML5创建一个移动网站,并希望使用HTML5视频标签。

I want the website to work with iPhone, iPad, Android and other smartphones/devices. 我希望该网站能够与iPhone,iPad,Android和其他智能手机/设备配合使用。

  1. Which video format should I choose? 我应该选择哪种视频格式? mp4? MP4?
  2. Which size should i use for width and height to get the best result? 我应该使用哪种尺寸的宽度和高度来获得最佳效果?
  3. Which FPS (frames per second rate) should I use for the videos? 我应该为视频使用哪种FPS(每秒帧速率)?

Thanks in advance. 提前致谢。

Those are pretty subjective questions, so I'll give you some rather subjective answers: 这些都是非常主观的问题,所以我会给你一些相当主观的答案:

  1. I have made good experiences (hope others as well) with serving 3 media types: H264/MP4 , OGG and WEBM for <video> elements, at least this combination worked fine on all devices I was able to check by now. 我已经为3种媒体类型提供了很好的体验(也希望是其他人):用于<video>元素的H264 / MP4OGGWEBM ,至少这个组合在我现在能够检查的所有设备上运行良好。
  2. In case you also want your video to be displayed inline on desktop browsers I'd say you should use the dimensions that are dictated by your layout. 如果您还希望在桌面浏览器上内嵌显示您的视频,我会说您应该使用布局规定的尺寸。 In case you are looking for a mobile only solution, a common resolution for 16:9 content would be 480x270 (that's what Quicktime Pro exports when you select "Save for iPhone"), if you are planning for tablet support as well you might want to serve alternative content for them. 如果您正在寻找仅限移动设备的解决方案,16:9内容的常用分辨率将为480x270(这是您选择“为iPhone保存”时Quicktime Pro导出的内容),如果您计划平板电脑支持也可能需要为他们提供替代内容。
  3. The lower the frame rate, the smaller the file, so you'll have to know by yourself how much filesize matters, the only thing I could advise would be using a full fraction of your original video frame rate (ie. 12.5fps if you want to reduce a 25fps source) as otherwise you'll get jittery drop-frame effects. 帧速率越低,文件越小,所以你必须自己知道文件大小的重要性,我唯一可以建议的是使用原始视频帧速率的一小部分(即12.5fps,如果你想减少一个25fps的源码,否则你会得到抖动的丢帧效果。

Also please see the great video section of Dive into HTML5 另请参阅潜入HTML5的精彩视频部分

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM