Bagaimana cara menanamkan file SWF di halaman HTML?

175

Bagaimana Anda menyematkan file SWF di halaman HTML?

CloudMeta
sumber

Jawaban:

174

Pendekatan terbaik untuk menanamkan SWF ke dalam halaman HTML adalah dengan menggunakan SWFObject .

Ini adalah pustaka JavaScript open-source sederhana yang mudah digunakan dan metode yang ramah standar untuk menyematkan konten Flash.

Ini juga menawarkan deteksi versi Flash player. Jika pengguna tidak memiliki versi Flash yang diperlukan atau JavaScript dinonaktifkan, mereka akan melihat konten alternatif. Anda juga dapat menggunakan perpustakaan ini untuk memicu pemutakhiran Flash player. Setelah pengguna memutakhirkan, mereka akan diarahkan kembali ke halaman.

Contoh dari dokumentasi:

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

Alat yang baik untuk digunakan bersama ini adalah generator SWFObject HTML dan JavaScript . Ini pada dasarnya menghasilkan HTML dan JavaScript yang Anda butuhkan untuk menanamkan Flash menggunakan SWFObject. Hadir dengan UI yang sangat sederhana untuk Anda memasukkan parameter Anda.

Sangat disarankan dan sangat mudah digunakan.

Ronnie Liew
sumber
11
Proyek SWFO bagus. Itu hanya bekerja. Ide yang lebih hebat adalah menggunakan Jaringan Pengiriman Konten untuk mendapatkan javascript. Saya menggunakan ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js
Ardee Aram
Saya punya masalah dengan menggunakan tag objek langsung dengan IE9 tetapi berfungsi dengan baik dengan swfobject.
AndyMcKenna
Terima kasih atas jawaban anda. Sekarang dapatkah Anda menyarankan pemain juga untuk mengakses kemampuan pemutaran bersama dengan contoh yang berfungsi di html itu sendiri. ????
Sumit Ramteke
Apakah ini berfungsi pada sistem di mana flash player tidak diinstal atau mendukung semua browser.
Mohammed Javed
Proyek ini sekarang dipindahkan ke GitHub: github.com/swfobject/swfobject dan teknik baru untuk menanamkan objek swf adalahvar 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
sumber
1
Kode itu bukan XHTML-valid ... <embed> tidak boleh berada dalam tag-objek.
Anheledir
59
Tidak ada spesifikasi pengguna yang valid untuk XHTML, ia meminta HTML
Ólafur Waage
3
artikel ini memiliki penjelasan yang baik tentang menanamkan flash dan XHTML yang valid. yoast.com/articles/valid-flash-embedding
Joko Wandiro
3
mengapa tidak menggunakan dataatribut dalam elemen <object> ? Kutipan dari w3c html5 docs: Setidaknya satu dari atribut data atau atribut type harus ada.
vladkras
@JokoWandiro tautan yang Anda berikan sayangnya hilang. Inilah versi yang diarsipkan: web.archive.org/web/20180602024700/https://yoast.com/…
Hermann.Gruber
17

Bagaimana dengan embed tag HTML5 sederhana?

<!DOCTYPE html>
<html>
<body>

<embed src="anim.swf">

</body>
</html>
Jan Desta
sumber
13

Ini cocok untuk aplikasi dari lingkungan root.

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

Parameter tambahan harus / dapat ditambahkan yang tergantung pada .swf sendiri. Tidak ada embed , hanya objek dan parameter di dalamnya, jadi, itu tetap valid, berfungsi dan dapat digunakan di mana-mana, tidak masalah yang mana! DOCTYPE adalah semua tentang. :)

Menyeramkan
sumber
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>
Menyeramkan
sumber
2
Perhatikan bahwa objek> data dan film> parameter nilai adalah sama. Kode ini dapat digunakan secara gratis untuk menonton dan berbagi - video youtube.
Seram
3
Secara umum, diinginkan jawaban untuk menjelaskan kode yang mereka berikan, bukan hanya menjatuhkan kode pada penanya. Tujuannya adalah untuk belajar tentang masalah dan mencegahnya di masa depan daripada membuatnya hilang.
KRyan
7

Jika Anda menggunakan salah satu perpustakaan js untuk memasukkan Flash, saya sarankan menambahkan tag embed objek polos di dalamnya <noscript/>.

Brian Kim
sumber
2

Saya menggunakan http://wiltgen.net/objecty/ , itu membantu untuk menanamkan konten media dan menghindari masalah IE "klik untuk mengaktifkan".

Eduardo Campañó
sumber
Masalah "klik untuk mengaktifkan" disebut "aktivasi eolas" tetapi dihapus dalam versi IE yang sebenarnya.
Anheledir
2

Seperti yang disebutkan Obyek SWF hebat. UFO juga layak untuk dilihat

phatduckk
sumber
2

Yang ini akan berhasil, saya yakin!

<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ć
sumber
1

Apakah cara terbaiknya? Kata-kata seperti 'paling efisien,' 'rendering tercepat,' dll. Lebih spesifik. Lagi pula, saya menawarkan jawaban alternatif yang membantu saya sebagian besar waktu (apakah 'terbaik' tidak relevan).

Alternatif jawaban: Gunakan iframe.

Yaitu, host file SWF di server. Jika Anda meletakkan file SWF di folder root atau public_html maka file SWF akan berlokasi di www.YourDomain.com/YourFlashFile.swf.

Kemudian, pada index.html Anda atau di mana saja, tautkan lokasi di atas ke iframe Anda dan itu akan ditampilkan di sekitar konten Anda di mana pun Anda meletakkan iframe Anda. Jika Anda dapat meletakkan iframe di sana, Anda dapat meletakkan file SWF di sana. Jadikan dimensi iframe sama dengan file SWF Anda. Dalam contoh di bawah ini, file SWF adalah 500 oleh 500.

Kode palsu:

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

Baris kode HTML di atas akan menyematkan file SWF Anda. Tidak perlu kekacauan lain. Kelebihan: W3C compliant, ramah desain halaman, tidak ada masalah kecepatan, pendekatan minimalis.
Cons: Ruang putih di sekitar file SWF Anda ketika diluncurkan di browser.

Itu jawaban alternatif. Apakah itu jawaban 'terbaik' tergantung pada proyek Anda.

Syed
sumber
3
untuk google @Stoic maaf kesalahan Anda itu harus //www...menggunakan //berarti bahwa jika Anda pada HTTPS atau HTTP ia bekerja menggunakan jenis koneksi yang sama
Barkermn01
1

Saya tahu ini adalah pertanyaan lama. Tetapi jawaban ini akan baik untuk saat ini.

<!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
sumber
1

Ini bekerja pada IE, Edge, Firefox, Safari dan 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
sumber
0

Ini bekerja untuk saya:

    <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
sumber
0

Gunakan <embed>elemen:

<embed src="file.swf" width="854" height="480"></embed>
aaron34weston
sumber
-1

Anda dapat menggunakan JavaScript jika Anda terbiasa, seperti itu:

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

--the 9.0.0 adalah versi flash.

Atau Anda dapat menggunakan <object>tag HTML5.

Allan
sumber
-1 swfobject bukan hanya bagian dari JavaScript, Anda tidak bisa menyebutnya begitu tanpa menyematkan perpustakaan. dan sebagian besar fungsionalitas untuk tag <object> telah dihapus dari HTML 4 hingga 5. Ini masih dapat digunakan, tetapi tidak disarankan. Semua dalam semua jawaban yang sangat buruk.
rorypicko
apakah Anda sudah mencobanya sebelum mengatakan itu jawaban yang sangat buruk? perlu diingat bahwa jawaban yang sangat buruk, adalah jawaban yang tidak sepenuhnya berfungsi atau salah.
Allan
fakta bahwa Anda memberi tahu seseorang untuk menggunakan javascript, dan kemudian menempelkan kode menggunakan pustaka javascript yang bahkan belum Anda sebutkan menjadikannya jawaban yang buruk
rorypicko
Saya sudah menyebutkan menggunakan Javascript dan memberikan skrip. Jika saya memberikan seluruh kode / skrip kerja yang membuat spoonfeeding. Script baik-baik saja hanya logikanya.
Allan
Anda salah memahami komentar saya. Anda belum mengatakan kepadanya untuk memasukkan file Javascript SWFObject
rorypicko