2014-04-30 4 views
1

나는 그물을 검색하고 있지만 내가 의도 한대로 아무것도 작동하지 않았습니다. 내가 원하는 것은 사용자가 YouTube 비디오의 URL을 전달할 수있는 텍스트 필드를 가지고 있다는 것입니다 (프런트 엔드에서 해당 URL을 사용하기 위해 해당 비디오를 표시하려고합니다). 요점은 비디오를 보여주지 않을 것입니다. 내가있는 iFrame을 사용하는 경우 그것은 작동하지만 그것은 잘 작동이그냥 동영상 URL을 전달하여 Youtube 동영상 재생

<iframe width="100%" height="100%" src="http://www.youtube.com/embed/vM89zeKimOY" frameborder="0" allowfullscreen></iframe> 

처럼 embaded로 URL을 필요로하지만, 당신이 보는대로 URL은 유 URL 표시 줄에서 복사/붙여 넣기 일반 URL이 아닙니다.

<iframe width="100%" height="100%" src="https://www.youtube.com/watch?v=vM89zeKimOY" frameborder="0" allowfullscreen></iframe> 

내가 플러그인 그냥 붙여 넣을 수있는 경우 잘 모릅니다 :

https://www.youtube.com/watch?v=vM89zeKimOY 

그래서 내가 원하는 것은 이런 떨어지게입니다 :

비디오의 URL이 있습니다 URL 및 재생, 또는 무엇을 실종하지만 실마리 ​​또는 어떤 도움을 많이 appruciated 것입니다.

+0

closelly를 보면 임베디드 링크를 아주 쉽게 연결할 수 있습니다. v = 뒤에 코드를 가져 가세요. 'https : // www.youtube.com/embed /'+ THECODE –

+0

@kikyalex 등의 임베디드 링크 템플리트에 삽입하면 어떻게 할 수 있습니까? – landi

답변

5

사용 JQuery와 당신이 간단하게 달성 할 수있다.

HTML을

<input id="TextBoxURL" /> 
    <br /> 
    <div id="iframe">   
    </div> 

스크립트

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

      $('#TextBoxURL').change(function() { 
       var youTubeUri = $('#TextBoxURL').val(); 
       var youTubeVideoId = get_youtubeId(youTubeUri); 
       loadYouTubeVideo(youTubeVideoId); 
      }); 
     }); 

     function get_youtubeId(url) { 
      var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; 
      var match = url.match(regExp); 
      if (match && match[2].length == 11) { 
       return match[2]; 
      } else { 
       //error 
      } 
     } 

     function loadYouTubeVideo(id){ 
      $('#iframe').append("<iframe width='560' height='315' src='//www.youtube.com/embed/"+id+"' frameborder='0' allowfullscreen></iframe>"); 
     } 
    </script> 

여기에 검증 부분을 포함하지 않았다.

건배. 해피 코딩 .. !!!

+0

고지에 대한 코드 샤나, 나는이 코드를 동적으로 작성하여 데이터베이스에서 변수를 읽은 다음 표시하는 것과 같은 방법으로 궁금합니다. 그러나 변수가 설정된 경우에만 설정되지 않았습니다. 그런 다음 비디오의 위치에서 이미지를 표시합니다. ??? – landi

1
var NormalLink = "https://www.youtube.com/watch?v=vM89zeKimOY"; 
var theCode = NormalLink.substring(NormalLink.indexOf('?v=')+3); 
var embedded = 'https://www.youtube.com/embed/'+theCode;  

FiddleLink : http://jsfiddle.net/swm7v/2/

+0

고맙습니다. PHP로 작성할 수 있습니까? – landi

+0

그냥 자바 스크립트 변수를 php로 바꿉니다. '$? = $ NormalLink.substr ($ NormalLink, ('? v = 0) '))) + 3);' '$ 임베디드 = 'https://www.youtube.com/embed/'+$theCode; ' '?>' –

관련 문제