メディアファイルのWebページ埋め込み｜jQuery plugin｜Ajax｜PHP & JavaScript Room

jQuery pluginメディアファイルのWebページ埋め込み


  1. jQuery + Adobe Flash integration plugin 〔jQuery+Adobe Flash統合プラグイン〕
  2. jQuery Flash Plugin〔Flashムービーの埋め込み〕
  3. jQuery Media Plugin〔様々なメディアファイルの埋め込みタグに変換する〕
  4. jQuery SWFObject Plugin 〔jQuery版SWFObjectプラグイン〕

jQuery + Adobe Flash integration plugin
jQuery+Adobe Flash統合プラグイン

2009/3/8

flashembed - Adobe Flash embedding

Firefox 1.5/2.0+、Internet Explorer 6.0+、Safari 2.0+、Opera 9.0+
MIT＆GPL 2+
jquery.js、flashembed-1.0.1.js

jQueryを使用した、WebページにFlashオブジェクトを埋め込むためのJavaScriptツール。

flashembed('myContainer', 'myflash.swf')のように記述するだけで、WebページにFlashオブジェクトを簡単に埋め込むことができます。 単一あるいは複数のFlashムービーをWebページに埋め込むだけでなく、クリックした時に再生が始まるように指定したり、Flash Playerのバージョンを取得して、指定したバージョン以下の場合に最新版のFlash Playerのダウンロードを表示するなどのサンプルも掲載されています。

設置イメージ設置イメージ
flashembedの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery + Adobe Flash integration plugin | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/flashembed-1.0.1.js"></script> 
        <script type="text/javascript">
            $(function(){
                /* 例1 */
                flashembed("clock", "/content/media/flash/mv016a.swf");
                /* 例2 */
                $("div.clock").flashembed("/content/media/flash/mv016a.swf");
                /* 例3 */
                $("#flash").click(function(){ 
                    flashembed(this, "/content/media/flash/mv016a.swf");
                });
                /* 例5 */
                flashembed("version_chk", {src: "/content/media/flash/mv016a.swf", version: [20, 0]});  
            }); 
            /* 例4 */
            flashembed.domReady(function() {
                // wmode parameter does the trick
                flashembed("place", {src: "/content/media/flash/mv016a.swf", wmode: 'opaque'});
            });
        </script>
        <style type="text/css">
            /* 例1 */
            #clock { width:320px; height:110px; border:1px solid #000; }
            /* 例2 */
            .clock { width:110px; height:110px; float:left; border:1px solid #000; margin-right:10px; }
            /* 例3 */
            #flash { width:320px; height:110px; border:1px solid #000; background-color:#fff; line-height:110px; font-weight:bold; text-align:center; }
            /* 例4 */
            #layer { width:100px; position:absolute; background-color:#ff6699; margin:10px; padding:10px; color:#fff; }
            #place { border:1px solid #000; width:320px;  height:110px; }
            /* 例5 */
            #version_chk { width:400px; border:1px outset #ccc; background-color:#efefef; padding:10px; }
            #version_chk img { float:left; margin-right:10px; }
            #version_chk h3 { margin-top:0px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://flowplayer.org/tools/flashembed.html'>flashembed - Adobe Flash embedding</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>例1：基本的なFlashの埋め込み</h2>
            <div id="clock"></div>

            <h2>例2：複数のFlashオブジェクトを埋め込み</h2>
            <div class="cf">
                <div class="clock"></div>
                <div class="clock"></div>
                <div class="clock"></div>
            </div>

            <h2>例3：マウスでクリックするとFlashを読み込む</h2>
            <div id="flash">
                クリックすると再生されます。
            </div>

            <h2>例4：Flashオブジェクト上にHTML要素をオーバーレイ表示</h2>
            <div id="layer">This layer is on top of the Flash object</div>
            <div id="place"></div>

            <h2>例5：古いFlashのバージョンの取り扱い</h2>
            <p>Flash Playerのバージョンが指定したバージョンより古い場合に、<br>最新版のFlashをダウンロード案内を表示します。</p>
            <div id="version_chk" class="cf"> 
                <img src="/content/img/flashplayer_100x100.jpg" /> 
                <h3>Flash Playerの入手</h3> 
                <p> 
                    最新版のFlash Playerをインストールしてください。
                    <a href="http://get.adobe.com/flashplayer/">ダウンロードはこちら</a>
                </p> 
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Flash Plugin
Flashムービーの埋め込み

2009/2/23

jQuery Flash Plugin

MIT＆GPL
jquery.js v1.0.3+、jquery.flash.js v1.0

FlashムービーをWebページに埋め込むためのjQueryプラグイン。

幅、高さ、要求するFlashのバージョン、Flashvarsに渡す値などをパラメータで指定することができます。

設置イメージ設置イメージ
jQuery Flash Pluginの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery Flash Plugin | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.flash.js"></script> 
        <style type="text/css">
            embed {    display: block; margin: 0 0 1em; }
        </style>
    </head>
    <body>
        <div id="wrap">
<h1><a href='http://jquery.lukelutman.com/plugins/flash/'>jQuery Flash Plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>基本的なFlashムービーの埋め込み</h2>
<div id="exp1"></div>
<script type="text/javascript">
    $(function() {
        $('#exp1').flash(
        {
            src:'/content/media/flash/mv016a.swf',
            width:320,
            height:110
        },
        {
            version: 8
        });
    });
</script>

<h2>YouTubeビデオの埋め込み</h2>
<p><a href="http://www.youtube.com/v/wMJTkrUia4w">ゴールデンハムスターのロッククライミング</a></p>
<script type="text/javascript">
    $(function(){
        $('a[@href^="http://www.youtube.com"]').flash(
            { width: 320, height: 240 },
            { version: 8 },
            function(htmlOptions) {
                $this = $(this);
                htmlOptions.src = $this.attr('href');
                $this.before($.fn.flash.transform(htmlOptions));
            }
        );
    });
</script>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Media Plugin
様々なメディアファイルの埋め込みタグに変換する

2009/3/8

jQuery Media Plugin

MIT＆GPL
jquery.js v1.1.2+、jquery.metadata.js、jquery.media.js

メディアファイルを指定したリンク要素を、そのメディアファイルに最適な埋め込みタグに変換して表示するjQueryプラグイン。 PDF、HTML、SWF、FLV、動画・音声ファイルなど様々なメディアファイルおよびファイル形式に対応しています。

ファイルの拡張子、埋め込みサイズなどは、a要素のclass属性にパラメータとして指定することができます。

▼PDFファイルの埋め込む場合

<a class='media { width:600, height:300 }'
   href='/content/demo/sample.pdf'></a>

▼HTMLファイルの埋め込む場合

<a class='media { width:400, height:145, type: 'html' }'
   href='/content/demo/sample.html'></a>

▼YouTubeビデオ（SWFファイル）を埋め込む場合

<a class='media { width:320, height:265, type:'swf' }'
   href='http://youtube.com/v/wmjtkruia4wy'></a>
設置イメージ設置イメージ
jQuery Media Pluginの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery Media Plugin | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.metadata.js"></script> 
        <script type="text/javascript" src="/content/lib/jquery/jquery.media.js"></script> 
        <script type="text/javascript" src="/content/jslib/swfobject.js"></script> 
        <script type="text/javascript">
            $(function(){
                $('a.media').media();
                $('a.audio').media( { width: 300, height: 20 } );
            });
        </script>
    </head>
    <body>
        <div id="wrap">
        <h1><a href='http://malsup.com/jquery/media/'>jQuery Media Plugin</a> | 設置サンプル</h1>
<!-- CODE -->
        <h2>PDFファイルの埋め込み</h2>
        <a class="media { width:600, height:300 }" href="/content/demo/sample.pdf"></a> 
        <h2>HTMLファイルの埋め込み</h2>
        <a class="media { width:400, height:145, type: 'html' }" href="/content/demo/sample.html"></a> 
        <h2>YouTubeビデオ（SWF）の埋め込み</h2>
        <p><a class="media { width:320, height:265, type:'swf' }" href="http://youtube.com/v/wMJTkrUia4w"></a></p>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery SWFObject Plugin
jQuery版SWFObjectプラグイン

2009/3/8

jQuery SWFObject Plugin

MIT＆GPL
jquery.js、jquery.swfobject.js

jQuery APIを使用してフラッシュコンテンツを埋め込むSWFObjectのユニークな機能をjQueryで利用できるjQueryプラグイン。

設置イメージ設置イメージ
jQuery SWFObject Pluginの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery SWFObject Plugin | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.swfobject.js"></script> 
        <script type="text/javascript">
            $(function(){
                /* 例1 */
                $('#exp1').flash({swf:'/content/media/flash/mv016a.swf',width:320,height:110});
            }); 
        </script>
        <style type="text/css">
            /* 例1 */
            #exp1 { width:320px; height:110px; border:1px solid #000; }
            #exp2 { width:320px; height:110px; border:1px solid #000; margin-bottom:10px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://jquery.thewikies.com/swfobject/'>jQuery SWFObject Plugin</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>例1：基本的なFlashの埋め込み</h2>
            <div id="exp1"></div>

            <h2>例2：Flashムービーの追加と削除</h2>
            <div style="text-align:center; width:320px; ">
                <div id="exp2"></div>
                <input type="button" onClick="$('#exp2').flash({swf:'/content/media/flash/mv016a.swf',width:320,height:110});" value="Flash追加" />
                <input type="button" onClick="$('#exp2').html('');" value="Flash削除" />
            </div>

<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.