窗口调整大小功能不适用于闪光灯

Posted 2023-02-16

【中文标题】窗口调整大小功能不适用于闪光灯

【英文标题】：Window resize function not working with flash

【发布时间】：2016-05-29 11:41:42

【问题描述】：

我正在为每个人使用视频中的代码 sn-p 在我的网站中嵌入视频。 sn-p 基本上或多或少地保证用户将能够从任何设备观看视频。这是我的html：

<div class="intermitent-video-container">
    <video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"  >
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
        <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"  > 
            <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="wmode" value="transparent" />
            <param name="flashVars" value="config='playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg','url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false]" />
            <img  src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg"   title="No video playback capabilities, please download the video below" />
        </object>
    </video>
</div>

为了控制此视频的大小和纵横比以实现响应式布局，我使用了以下 javascript：

function resizeVideo() 
  var videoWidth = jQuery(".intermitent-video-container").width();
  var videoHeight = videoWidth * 0.666;
  jQuery(".intermitent-video-container").css('height',videoHeight);
;

resizeVideo();
jQuery(window).resize(resizeVideo);

上面的 sn-p 完全按照我的意愿工作，除了视频回退到视频的 Flash 版本时。当我在Safari 5.1.7 中加载页面时，例如使用 flash 的视频将在加载时使用上面的代码 sn-p 调整我想要的大小，而不是在调整窗口大小时。这是对 flash 的限制还是我做错了什么？

【参考方案1】：

为视频标签添加 css

video
    width: 100%;
    height: auto;

您绝对确定 intermitent-video-container 有响应。 注意：不要忘记<meta name="viewport" content="width=device-width, initial-scale=1">在你的头部 HTML

【讨论】：

不幸的是没有解决问题