Shunze ¾Ç¶é >¹q¸£¸ê°T¾Ç¨t >¦Y³n¤£¦Yµw > ¡m¤À¨É¡n§âYoutube¼v¤ù·íºô­¶­I´º «¢Åo¡AÁÙ¨S¦³µù¥U©ÎªÌµn¤J¡C½Ð§A[µù¥U|µn¤J]
« ¤W¤@½g¥DÃD ¤U¤@½g¥DÃD » Åã¥Ü¦¨¦C¦L¼Ò¦¡ | ¼W¥[¨ì§Úªº³Ì·R
µoªí·s¥DÃD µoªí¦^ÂÐ
§@ªÌ
¥DÃD
shunze
¤u¤Í§B§B


µù¥U¤é´Á: 2002 04
¨Ó¦Û: ¼é¦Á²×¤î¤§¦a
¤å³¹: 2380

shunze Â÷½u
¡m¤À¨É¡n§âYoutube¼v¤ù·íºô­¶­I´º¤Þ¥Î¦^ÂÐ ½s¿è/§R°£¤å³¹ ·j´M¥Ñ  µoªíªº¨ä¥L¤å³¹ ¦^³øµ¹ª©¥D IP ¦ì¸m ¦^¦¹­¶³Ì¤W¤è

¬Ý¨ì2014·s¥_¥«¨àµ£ÃÀ³N¸`ªº¬¡°Êºô­¶«á¡A
¶¶¤l´Nı±o³oÂŤѥն³ªº¼v¤ù®³¨Ó·í¶¶¤lºô¯¸ªº­I´º¯u¬O¦A¾A¦X¤]¤£¹L¤F¡I


«ç»ò°µ©O¡H
À˵ø¥¦ªººô­¶­ì©l½X¡Aµo²{¬O³z¹L jquery.mb.YTPlayer ³o­ÓJavaScript¨Ó¹F¦¨ªº¡C
¦b jquery.mb.YTPlayer ªº ­ì©lºô¯¸ «öÆg«á¡A´N¥i¥H¤U¸ü®M¥ó¡C

®M¥óùØ­±¥]§t¤FajaxLoad¡Acss¡Aimages¡Ainc¡Alicenseµ¥¸ê®Æ§¨¤Îdemoªººô­¶¡A
¬Ý¤Fdemoºô­¶ªº­ì©l½X¨Ã´ú¸Õ«á¡A¶¶¤lµo²{¥¦¦b¹B§@¤W¦³¥H¤U´XÂI­«ÂI¡C

  • ¥¦¤@©w­n³z¹Lweb server¨Ó¼½©ñ¤~¯à¬Ý¨ì®ÄªG¡C­Y¬O³z¹L¥»¾÷ÀÉ®×¥´¶}ÂsÄý¾¹¨Ó¼½©ñ¡A¨º¬O¬Ý¤£¨ì®ÄªGªº¡C
  • ºô­¶ªº¶}ÀY¤@©w­n«Å§iDTD(Document Type Definitions)¡A§_«h¦bIE¤W¬Ý¤£¨ì®ÄªG¡C
  • ­ì©l®M¥ó¤ºÁöµM¦³«Ü¦hªF¦è¡A¦ý¹ê»Ú·|¥Î¨ìªº¡A´N¥u¦³YTPlayer.css»Pjquery.mb.YTPlayer.js¨â­ÓÀɮסC
  • youtubeªººô§}url­n¿é¤Jyoutu.be®æ¦¡¡A¤£¯à¥Îyoutube.com®æ¦¡¡C



¹ê»Ú¦b¹B§@®É¡A¥i¨Ì¥H¤U¤èªk¡A¦b±zªººô­¶¤¤¶i¦æ­×§ï¡C
  1. ©ó<html>«e¥[¤JDTD«Å§i¡C
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    ...

  2. §âYTPlayer.css»Pjquery.mb.YTPlayer.js©ñ¨ì¯¸¥x¤W¡A¨Ã©ó<head></head>°Ï¶¡¥[¤Jcss¤Îscriptªº¤º®e¡C
    °O±o¸ô®|­n¥¿½T¤~¦æ¡A¥H¶¶¤lªººô¯¸¬°¨Ò¡A³o¨â­ÓÀɮ׬O©ñ¦bincludeªº¸ô®|¤U¡C
    <head>
    <!--Youtube Background Start-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
    <script type="text/javascript" src="/include/jquery.mb.YTPlayer.js"></script>
    <link href="/include/YTPlayer.css" media="all" rel="stylesheet" type="text/css">
    <script>
    $(function(){
    $(".player").mb_YTPlayer();
    });
    </script>

    <!--Youtube Background End-->
    </head>

  3. ¦b<body>tag¤U¥[¤J¤@­Ó¼·©ñ¥Îªº<a>tag¡A¦Ó³o­Ótagªºclass¦WºÙ player ¤@©w­n©M¤W­Ó¨BÆJ¤¤ªºscript¹ïÀ³³á¡I
    <body>
    <a class="player" data-property="{videoURL:'http://youtu.be/vw4dPHTvbiE',containment:'body',autoPlay:true,mute:true,startAt:0,opacity:1}">My video</a>
    ...

  4. ¦b¹w³]±ø¥ó¤U¡A²£¥ÍªºYoutubeºô©³¬O¦³¼·©ñ¾¹ªº±±¨î¶µªº¡C
    ­n®³±¼±±¨î¶µ¡A´N­n¥[¤W showControls ÄÝ©Ê¡A¨Ã³]©w¬°false¡C
    <body>
    <a class="player" data-property="{videoURL:'http://youtu.be/vw4dPHTvbiE',showControls:false,containment:'body',autoPlay:true,mute:true,startAt:0,opacity:1}">My video</a>
    ...

  5. ­Y©M¶¶¤l¤@¼Ë¡A§Æ±æ¦b©Ò¦³ºô­¶³£¯à¦³¦¹®ÄªG¡A¦ý¤S¤£§Æ±æ¼v¤ù³sµ²²§°Ê®É¡A©Ò¦³ºô­¶³£­n­×§ï¡H
    ¨º´N¦b jquery.mb.YTPlayer.js ¤¤¡A²Ä100¦æªº¦a¤è¡A§â¼v¤ùºô§}³]©wµ¹ videoURL Äݩʧa¡C
    jQuery.mbYTPlayer = {
            name : "jquery.mb.YTPlayer",
            version : "2.7.0",
            author : "Matteo Bicocchi",
            defaults : {
                containment : "body",
                ratio : "16/9",
                videoURL : "http://youtu.be/vw4dPHTvbiE",
                startAt : 0,
                stopAt : 0,
                autoPlay : true,
                vol : 100, // 1 to 100
                addRaster : false,
                opacity : 1,
                quality : "default", //or ¡§small¡¨, ¡§medium¡¨, ¡§large¡¨, ¡§hd720¡¨, ¡§hd1080¡¨, ¡§highres¡¨
                mute : false,
                loop : true,
                showControls : true,
                showAnnotations : false,
                showYTLogo : true,
                stopMovieOnClick : false,
                realfullscreen : true,
                gaTrack : true,
                onReady : function (player) {},
                onStateChange : function (player) {},
                onPlaybackQualityChange: function (player) {},
                onError : function (player) {}
            },

    µM«á§â<body><a>¤¤ªººô§}¤ÎÄݩʾã­Ó®³±¼¡A¥H«á­n§ïºô§}¡A´Nª½±µ§ï jquery.mb.YTPlayer.js ¤¤ªº videoURL Äݩʧa¡C
    <body>
    <a class="player" data-property="{showControls:false,containment:'body',autoPlay:true,mute:true,startAt:0,opacity:1}">My video</a>
    ...


¥Ü½dºô­¶¡Gwww.shunze.info



♥¶¶¤l¦Ñ±Cªººô©ç¡A½Ð¦hÃö·Ó¡ã

If you don't like something, change it.
If you can't change it, change your attitude.
Don't complain!




2014-07-06, 21:56 shunze ªº­Ó¤H¸ê®Æ §â shunze ¥[¤J¦n¤Í¦Cªí µo°eEmailµ¹ shunze ÂsÄý shunze ªººô¯¸ MSN : shunze@gmail.com
  « ¤W¤@½g¥DÃD ¤U¤@½g¥DÃD »
µoªí·s¥DÃD µoªí¦^ÂÐ
¸õ¨ì:

Powered by: Burning Board 1.1.1 2001 WoltLab GbR