1 Востаннє редагувалося leofun01 (01.04.2018 01:53:19)

Тема: Як масштабувати swf/flv object в HTML/XHTML документі ? [Вирішено]

Далі приклад, як масштабувати swf/flv object (об'єкт, який відтворюється flash-player'ом) на сторінці.

Є HTML документ, в тілі якого є тег object ...

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <style type="text/css">
        <!-- /* --><![CDATA[/*><!-- */
        html, body {
            height: 100%;
            width: 100%;
            display: block;
            margin: 0 0;
        }
        body * {
            width: 100%;
            height: 100%;
            display: block;
            margin: 0 auto;
            position: relative;
            text-align: center;
        }
        object { font-size: 2rem; }
        param { display: none; }
        object>* { height: initial; }
        body>* { position: absolute; }
        /* --><!]]><!-- */ -->
    </style>
</head>
<body>
    <div id="wrapper">
        <object width="100%" height="100%"
            type="application/x-shockwave-flash"
            data="file.swf"
        >
            <param name="width" value="100%" />
            <param name="height" value="100%" />
            <param name="wmode" value="window" />

            <param name="src" value="file.swf" />
            <param name="quality" value="autolow" />
            <param name="allowFullScreen" value="true" />
            <param name="allowFullScreenInteractive" value="true" />
            <param name="allowScriptAccess" value="no" />
            <param name="bgcolor" value="#ABCDEF" />
            <param name="menu" value="false" />
            <param name="flashvars" value="lang=uk&amp;other_vars=..." />
            <div id="no_flash_text">
                <p>Flash player не запустився.</p>
                <a href="support/" target="_blank"> Запитати / Повідомити </a>
            </div>
        </object>
    </div>
</body>
</html>

Дані подано в форматі:
тег, в якому щось змінюємо:  старе значення  -->  нове значення.
style:    --> 

        body { transform: scale(0.64); }
        body>* {
            width: 156.25%;
            height: 156.25%;
            left: -28.125%;
            top: -28.125%;
        }

param[name="wmode"]:  value="window" | value="..."  -->  value="opaque" | value="transparent"

Пояснення до значень:

156.25% == 1.5625 == 1 / 0.64
28.125% == (156.25% - 100%) / 2

Firefox має баг пов'язаний з відрисовкою, через що в ньому swf object (HTML) несуміснісний з transform (CSS), крім випадків, коли object містить

<param name="wmode" value="opaque" />

, або

<param name="wmode" value="transparent" />

.

Якщо є потреба ручного масштабування, то ще дописуємо:
meta[name="viewport"]:  user-scalable=no  -->  user-scalable=yes

Зверніть увагу, є атрибути, які не варто чіпати:
object:  width="100%" height="100%"
param[name="width"]:  value="100%"
param[name="height"]:  value="100%"
param[name="flashvars"]:  value="..."

На виході маємо це: ...

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=yes" />
    <style type="text/css">
        <!-- /* --><![CDATA[/*><!-- */
        html, body {
            height: 100%;
            width: 100%;
            display: block;
            margin: 0 0;
        }
        body * {
            width: 100%;
            height: 100%;
            display: block;
            margin: 0 auto;
            position: relative;
            text-align: center;
        }
        object { font-size: 2rem; }
        param { display: none; }
        object>* { height: initial; }
        body>* { position: absolute; }
       /* scale swf */
        body { transform: scale(0.64); }
        body>* {
            width: 156.25%;
            height: 156.25%;
            left: -28.125%;
            top: -28.125%;
        }
        /* --><!]]><!-- */ -->
    </style>
</head>
<body>
    <div id="wrapper">
        <object width="100%" height="100%"
            type="application/x-shockwave-flash"
            data="file.swf"
        >
            <param name="width" value="100%" />
            <param name="height" value="100%" />
            <param name="wmode" value="opaque" />

            <param name="src" value="file.swf" />
            <param name="quality" value="autolow" />
            <param name="allowFullScreen" value="true" />
            <param name="allowFullScreenInteractive" value="true" />
            <param name="allowScriptAccess" value="no" />
            <param name="bgcolor" value="#ABCDEF" />
            <param name="menu" value="false" />
            <param name="flashvars" value="lang=uk&amp;other_vars=..." />
            <div id="no_flash_text">
                <p>Flash player не запустився.</p>
                <a href="support/" target="_blank"> Запитати / Повідомити </a>
            </div>
        </object>
    </div>
</body>
</html>

Порівняння.
До:
http://leofun01.pp.ua/zoom_1.0_m.png

Після:
http://leofun01.pp.ua/zoom_0.6_m.png