safari 浏览器上的 html5 视频播放器大小答案

【问题标题】：html5 video player size on safari browserssafari 浏览器上的 html5 视频播放器大小
【发布时间】：2012-10-16 22:16:24
【问题描述】：

我在带有 HTML5 video 播放器元素的 Safari 浏览器 (PC/MAC) 上遇到问题。

问题是播放的视频不反映视频source元素的真实视频，width和height属性指定的大小也不反映。

这里是演示网址：

http://actisku.videohosting.fr/test.html

<video id="homepage_videoplayer" poster="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.png" loop="loop"  autoplay="autoplay" width="979" height="365">
     <source src="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.mp4" type="video/mp4" />
     <source src="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

mp4 源文件为 979x365。同样大小的播放器video 元素也是如此。但它应该以相同的大小读取。

可能是元数据问题，但我不知道如何编辑此元数据。

编辑：

使用 JavaScript ，我可以看到视频 width 在 Safari 上是 649，在 Chrome 上是 979，很奇怪。所以我打算使用-webkit-transform scaleX() 来解决这个问题。

【问题讨论】：

标签： html safari html5-video

【解决方案1】：

您在线收到一个 javascript 错误：39

vid.css("video","scaleX(1.5)");

我认为您要做的是添加属性

scaleX="1.5"

到<video> 标签，是这样吗？尝试手动添加它，看看这是否是你要找的，所以你最终会得到这个：

<video id="homepage_videoplayer" scaleX="1.5" poster="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.png" loop="loop"  autoplay="autoplay" width="979" height="365">
    <source src="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.mp4" type="video/mp4" />
    <source src="http://actisku.videohosting.fr/medias/videos/v_actisku_visualproject_sephora_61.ogv" type='video/ogg; codecs="theora, vorbis"' />    
</video>

【讨论】：

问题是 scaleX 必须只适用于 safari，在其他浏览器上我没有遇到任何问题。
你只是想“适应”吗？如果是这样，请查看这个想法 jsfiddle.net/MDppT 我在 Safari 和 Chrome 中对其进行了测试，它可以缩放以适应 DIV 的大小
davehale23，我试过了，它在 safari 中有效，但在 iOS 的 webviews 中无效。