Question

我在使用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()来解决这个问题。

Answer 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>

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

1 个答案: