Jak osadzić plik SWF na stronie HTML?

175

html embed flash CloudMeta
źródło

174

Najlepszym sposobem osadzenia pliku SWF na stronie HTML jest użycie SWFObject .

Jest to prosta biblioteka JavaScript typu open source, która jest łatwą w użyciu i przyjazną dla standardów metodą osadzania treści Flash.

Oferuje również wykrywanie wersji odtwarzacza Flash. Jeśli użytkownik nie ma wymaganej wersji Flasha lub ma wyłączoną obsługę JavaScript, zobaczy alternatywną zawartość. Możesz także użyć tej biblioteki do uruchomienia aktualizacji Flash Playera. Po aktualizacji użytkownik zostanie przekierowany z powrotem na stronę.

Przykład z dokumentacji:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
        swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

Dobrym narzędziem do użycia razem z tym jest generator SWFObject HTML i JavaScript . Zasadniczo generuje HTML i JavaScript potrzebne do osadzenia Flasha za pomocą SWFObject. Posiada bardzo prosty interfejs użytkownika do wprowadzania parametrów.

Jest wysoce zalecany i bardzo prosty w użyciu.

Ronnie Liew
źródło

11

SWFObject jest dobry. Po prostu działa. Jeszcze wspanialszym pomysłem jest skorzystanie z sieci dostarczania treści w celu pobrania kodu JavaScript. Używam ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js

Ardee Aram

Miałem problemy z używaniem tagu object bezpośrednio w IE9, ale działa on doskonale z swfobject.

AndyMcKenna,

Dziękuję za odpowiedź. Czy możesz teraz zasugerować odtwarzacz, aby uzyskać dostęp do możliwości odtwarzania, wraz z działającym przykładem w samym html. ????

Sumit Ramteke,

Czy to działa na tym systemie, w którym Flash Player nie jest zainstalowany lub obsługuje wszystkie przeglądarki.

Mohammed Javed,

Projekt został przeniesiony do GitHub: github.com/swfobject/swfobject, a nowa technika osadzania obiektu swf tovar el = document.getElementById("my-target-element"); swfobject.embedSWF("myContent.swf", el, 300, 120, 10);

Lucky

127

<object width="100" height="100">
    <param name="movie" value="file.swf">
    <embed src="file.swf" width="100" height="100">
    </embed>
</object>

Ólafur Waage
źródło

1

Ten kod nie jest zgodny z XHTML ... <embed> nie może znajdować się wewnątrz tagu obiektu.

Anheledir

59

Brak specyfikacji użytkownika do poprawności XHTML, poprosił o HTML

Ólafur Waage

3

ten artykuł zawiera dobre wyjaśnienie dotyczące osadzania Flasha i prawidłowego XHTML. yoast.com/articles/valid-flash-embedding

Joko Wandiro

3

dlaczego nie użyć dataatrybutu w elemencie <object> ? Cytat z dokumentów w3c html5: przynajmniej jeden z atrybutów data lub atrybut type musi być obecny.

vladkras

@JokoWandiro link, który podałeś, niestety zniknął. Oto zarchiwizowana wersja: web.archive.org/web/20180602024700/https://yoast.com/…

Hermann.Gruber

17

A co z osadzeniem prostego tagu HTML5?

<!DOCTYPE html>
<html>
<body>

<embed src="anim.swf">

</body>
</html>

Jan Desta
źródło

13

Jest to odpowiednie dla aplikacji ze środowiska roota.

<object type="application/x-shockwave-flash" data="/dir/application.swf" 
id="applicationID" style="margin:0 10px;width:auto;height:auto;">

<param name="movie" value="/dir/application.swf" />
<param name="wmode" value="transparent" /> <!-- Or opaque, etc. -->

<!-- ↓ Required paramter or not, depends on application -->
<param name="FlashVars" value="" />

<param name="quality" value="high" />
<param name="menu" value="false" />

</object>

Należy / można dodać dodatkowe parametry, które zależą od pliku .swf. Bez osadzania , tylko obiekt i parametry wewnątrz, więc pozostaje ważny, działa i można go używać wszędzie, nie ma znaczenia, o który chodzi! :)

Straszny
źródło

8

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/VhtIydTmOVU&amp;hl=en&amp;fs=1&amp;color1=0xe1600f&amp;color2=0xfebd01" 
style="width:640px;height:480px;margin:10px 36px;">

<param name="movie" value="http://www.youtube.com/v/VhtIydTmOVU&amp;hl=en&amp;fs=1&amp;color1=0xe1600f&amp;color2=0xfebd01" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />

</object>

Straszny
źródło

2

Zauważ, że parametry object> data i movie> value są takie same. Ten kod powinien działać za darmo do oglądania i udostępniania - wideo z YouTube.

Spooky

3

Ogólnie rzecz biorąc, pożądane jest, aby odpowiedzi wyjaśniały kod, który podają, zamiast po prostu upuszczać kod na pytającym. Celem jest raczej poznanie problemów i zapobieganie im w przyszłości, niż sprawienie, by zniknęły.

KRyan

7

Jeśli używasz jednej z tych bibliotek js do wstawiania Flasha, sugeruję dodanie zwykłego znacznika osadzania obiektu wewnątrz <noscript/>.

Brian Kim
źródło

2

Używam http://wiltgen.net/objecty/ , pomaga to osadzić treści multimedialne i uniknąć problemu z IE „kliknij, aby aktywować”.

Eduardo Campañó
źródło

Problem „kliknij, aby aktywować” nazywa się „aktywacja eolas”, ale jest usuwany w aktualnych wersjach IE.

Anheledir

2

Jak wspomniano, obiekt SWF jest świetny. UFO też jest warte zobaczenia

phatduckk
źródło

2

Jestem pewien, że ten zadziała!

<embed src="application.swf" quality="high" pluginspage="http://www.macromedia.com/go/getfashplayer" type="application/x-shockwave-flash" width="690" height="430">

Stefan Đorđević
źródło

1

Jaka jest najlepsza droga? Słowa takie jak „najbardziej wydajne”, „najszybsze renderowanie” itp. Są bardziej szczegółowe. W każdym razie oferuję alternatywną odpowiedź, która pomaga mi przez większość czasu (nie ma znaczenia, czy jest „najlepsza”, czy nie).

Alternatywna odpowiedź: użyj elementu iframe.

Oznacza to, że umieść plik SWF na serwerze. Jeśli umieścisz plik SWF w folderze głównym lub public_html, plik SWF będzie znajdować się pod adresem www.YourDomain.com/YourFlashFile.swf.

Następnie w pliku index.html lub w innym miejscu połącz powyższą lokalizację z ramką iframe, a zostanie ona wyświetlona wokół treści w każdym miejscu, w którym umieścisz element iframe. Jeśli możesz umieścić tam ramkę iframe, możesz umieścić tam plik SWF. Spraw, aby wymiary iframe były takie same jak w pliku SWF. W poniższym przykładzie plik SWF ma wymiary 500 na 500.

Pseudo kod:

<iframe src="//www.YourDomain.com/YourFlashFile.swf" width="500" height="500"></iframe>

Linia powyższego kodu HTML osadzi Twój plik SWF. Żaden inny bałagan nie jest potrzebny. Zalety: zgodność z W3C, przyjazny projekt strony, brak problemu z szybkością, minimalistyczne podejście.
Wady: Pusta przestrzeń wokół pliku SWF po uruchomieniu w przeglądarce.

To jest alternatywna odpowiedź. To, czy jest to „najlepsza” odpowiedź, zależy od Twojego projektu.

Syed
źródło

3

na google @Stoic Przepraszamy zła należy //www...za pomocą //środków, które jeśli na HTTPS lub HTTP działa przy użyciu tego samego typu połączenia

Barkermn01

1

Wiem, że to stare pytanie. Ale ta odpowiedź na razie będzie dobra.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>histo2</title>
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #ffff99;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:100%; }
        </style>
    </head>
    <body>
        <div id="flashContent">
            <object type="application/x-shockwave-flash" data="histo2.swf" width="822" height="550" id="histo2" style="float: none; vertical-align:middle">
                <param name="movie" value="histo2.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffff99" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <a href="http://www.adobe.com/go/getflash">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                </a>
            </object>
        </div>
    </body>
</html>

Isuru Dilshan
źródło

1

Działa na IE, Edge, Firefox, Safari i Chrome.

<object type="application/x-shockwave-flash" data="movie.swf" width="720" height="480">
            <param name="movie" value="movie.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="wmode" value="window" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="allowScriptAccess" value="sameDomain" />
            <a href="http://www.adobe.com/go/getflash">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
            </a>
        </object>

xxnull
źródło

0

To zadziałało dla mnie:

    <a target="_blank" href="{{ entity.link }}">
        <object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
            <param name="quality" value="high">
            <param name="play" value="true">
            <param name="LOOP" value="false">
            <param name="wmode" value="transparent">
            <param name="allowScriptAccess" value="true">
        </object>
    </a>

gtb
źródło

0

Użyj <embed>elementu:

<embed src="file.swf" width="854" height="480"></embed>

aaron34weston
źródło

-1

Możesz używać JavaScript, jeśli znasz, na przykład:

swfobject.embedSWF("filename.swf", "Title", "width", "height", "9.0.0");

- wersja 9.0.0 to wersja flash.

Możesz też użyć <object>tagu HTML5.

Allan
źródło

-1 swfobject to nie tylko część JavaScript, nie można go po prostu wywołać bez osadzania biblioteki. Większość funkcji tagu <object> została usunięta z HTML 4 do 5. Nadal można go używać, ale nie jest to zalecane. W sumie bardzo zła odpowiedź.

rorypicko

czy próbowałeś już tego, zanim powiedziałeś, że to bardzo zła odpowiedź? pamiętaj, że bardzo zła odpowiedź to odpowiedź, która nie działa całkowicie lub nie jest zła.

Allan

fakt, że informujesz kogoś, aby używał javascript, a następnie wklejanie kodu za pomocą biblioteki javascript, o której nawet nie wspomniałeś, sprawia, że jest to zła odpowiedź

rorypicko

Wspomniałem już o używaniu Javascript i dałem skrypt. Gdybym podał cały działający kod / skrypt, który sprawia, że karmienie łyżką. Skrypt jest w porządku, to tylko logika.

Allan

Źle rozumiesz mój komentarz. Nie kazałeś mu dołączyć pliku Javascript SWFObject

kazałeś

Jak osadzić plik SWF na stronie HTML?

Odpowiedzi: