썸네일 크기에서 '일반'크기까지 YouTube 플레이어 크기를 조정하는 방법

StackOverflow https://stackoverflow.com/questions/1314662

  •  19-09-2019
  •  | 
  •  

문제

나는 이것이 Facebook이하는 것과 비슷하다고 생각하지만 ... 나는 그들이하는 일을 따르는 방법을 해결하지 못했고 이것이 속임수라면 죄송합니다.

아이디어는 축소판 크기의 플레이어를 갖는 것입니다 (width="220px" height="180px") 클릭하면 '정상'크기로 크기를 조정합니다 (정상은 물론 임의적이지만이 예를 위해서, 우리와 함께 가면이 예를 위해서 width="445px", height="364px" YouTube 기본값으로)와 재생.

onclick 이벤트가 <object> 그리고 <embed> 태그이지만 객체가 플래시이기 때문에 플래시 플레이어가 브라우저에보고하는 대신 클릭을 '캡처'한다고 가정합니까?

다음 비디오는 내가 사용하려는 비디오 중 하나이며 실제 예를 들어 보려고합니다.

<object class="yt" width="445" height="364">
<param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed>
</object>

부록으로서, 이것은 짧은 시간 동안 정적 HTML 페이지에서 사용될 가능성이 높으며, 그 후 곧 PHP (5.2) 사이트로 옮겨 질 수 있습니다. PHP와 HTML은 jQuery 1.3.2가 연결되어 있습니다. 이를 쉽게 수행하기 위해 존재하는 경우 타사 플러그인을 사용하게되어 기쁩니다.

모든 도움을 주셔서 감사합니다. 멍청한 질문이 될 수있는 일이 무엇인지 물어봐서 죄송합니다. 그것 ~해야 한다 분명하다고 생각합니다.

미리 감사드립니다.

도움이 되었습니까?

해결책

Facebook은 플레이어처럼 보이는 썸네일을 사용합니다. 나는 a를 찾았다 jQuery 플러그인 YouTube 썸네일을 얻을 수 있습니다. 그래도 시도하지 않았습니다.

일부 샘플 코드 :

<div id="youtoobin">

</div>

<div id="blarg" style="display:none">
    <object class="yt" width="445" height="364">
    <param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed>
    </object>
</div>

그리고 JS :

<script>
    $(function() {
    $("#youtoobin").append("<img id='thumby' src='" + $.jYoutube('2ieLb3RAblA', 'small') + "'/>");

        $("#thumby").live("click", function() {
            $("#youtoobin").html($("#blarg").html());
        });
    });
</script>

사용자가 이미지를 클릭하는 경우 원하기 때문에 AutoPlay를 켜고 있습니다. 이것은 앱에 통합하기위한 좋은 출발점이어야합니다. jQuery 플러그인이하는 유일한 일은 썸네일 이미지의 URL을 얻는 것입니다. 크거나 작은 이미지를 얻을 수 있습니다.

다른 팁

나는 지금까지 Andy의 업데이트를 보지 못했기 때문에, 나는 이것을하는 상당히 끔찍한 방법을 생각해 냈다 (그러나 나는 그의 대답을 받아 들였다. 그것은 내 대답을 받아 들였다).

        <script type="text/javascript">
  $(document).ready(function(){

    $("img").click(function () {

    var videoID = $(this).attr("id");

    $(this).replaceWith("<object class=\"yt\" width=\"445\" height=\"364\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"445\" height=\"364\"></embed></object>");

    });

  });

        </script>

다음 HTML과 함께 사용됩니다.

<dl>
<dt>Thoughts of Sacrament</dt>
<dd><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" class="yt" /></dd>

<dt>Sanity falling</dt>
<dd><img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" class="yt" /></dd>
</dl>

내 해결책은 #id 클릭 된 이미지의 속성을 다음에 삽입합니다. replaceWith() 암호. 그것은 패션 후에 작동합니다. 그러나 스크린 샷 -> crop-> video -id.png 접근 방식으로 저장은 지루하지만 가장 적게 말합니다. 나는 아마도 내 해결책을 다른 것이 없다면 한심한 자부심의 문제로 내 솔루션을 유지할 것이라고 생각하지만, 나는 그것을 Jyoutube 접근법과 결합 시키려고 노력할 것이다.

그래도 작동하지 않으면 Andy의 답변을 사용하겠습니다.

업데이트로서, 나는 jQuery의와 함께 조금 더 우아하게 적응했습니다. animate():

<script type="text/javascript">
$(document).ready(function(){

    $("img").click(function () {

        var videoID = $(this).attr("id");

        $(this).animate({ 
        width: "445px",
        height: "364px"
        }, 600, function() { 

            $(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object><span class=\"close\"><a href=\"#\">x</a></span>");
        });
    });

});
        </script>

또한, 나는 a를 생성하고 있습니다 <span class="close"><a href="#">x</a></span>, 클릭 핸들러와 함께 플래시 비디오를 다시 줄이고 원본으로 교체하기 위해 희망적으로 제공해야합니다. .png.

이것은 ... 내가 왜 jquery가 그것을 가지고 있지 못하게 할 수 있다면 $(this).click(); 이벤트...

때때로 나는 단지 내가 멈출 때를 알고 싶었 으면 좋겠다 ... 어떤 도움이 감사하니 ... =)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top