<![CDATA[html 동영상 끝난 후 자동 팝업창 이벤트 활성화]]> https://www.cosmosfarm.com/threads/rss/document/10076 안녕하세요 웹사이트 개발하는데 동영상을 업로드 하려고합니다.

동영상이 끝나면(종료되면) 자동으로 팝업창이 뜨는 이벤트를 넣으려고하는데

유튜브 동영상을 활용하면서 이용하다가 이번에 FTP 를 이용하여 URL 로 동영상 업로드를 하게되어서요.

 

기존에있는 동영상은 유튜브 동영상을 활용한 이벤트 발생 html입니다.

이것을 어떻게 수정해야 할까요? 도와주세요..

---------------

<!DOCTYPE html>

<html>

  <body>

    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->

    <div id="player"></div>

 


    <script>

      // 2. This code loads the IFrame Player API code asynchronously.

      var tag = document.createElement('script');

 


      // This is a protocol-relative URL as described here:

      //     http://paulirish.com/2010/the-protocol-relative-url/

      // If you're testing a local page accessed via a file:/// URL, please set tag.src to

      //     "https://www.youtube.com/iframe_api" instead.

      tag.src = "//www.youtube.com/iframe_api";

      var firstScriptTag = document.getElementsByTagName('script')[0];

      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 


      // 3. This function creates an <iframe> (and YouTube player)

      //    after the API code downloads.

      var player;

      function onYouTubeIframeAPIReady() {

        player = new YT.Player('player', {

          height: '442',

          width: '768',

          videoId: '아이디?modestbranding=1&rel=0&showinfo=0&disablekb=1&controls=0&autoplay=1&autohide=1',
    //videoId: '아이디',          

          events: {

            'onReady': onPlayerReady,

            'onStateChange': onPlayerStateChange

          }

        });

      }

 


      // 4. The API will call this function when the video player is ready.

      function onPlayerReady(event) {

        event.target.playVideo();

      }

 

 

 

      // 5. The API calls this function when the player's state changes.

      //    The function indicates that when playing a video (state=1),

      //    the player should play for six seconds and then stop.

      var done = false;

      function onPlayerStateChange(event) {

 

   // 동영상상태가 종료상태가 되면 구동.

        if (event.data == YT.PlayerState.ENDED) {


window.open("팝업창주소", "_blank","location=0,directoryies=0,resizable=0,staus=0,toolbar=nomemubar=0,top=30,left=30,width=1144,height=890");
//window.showModalDialog("팝업창주소","","");
        return;

 

        }

      }

      function stopVideo() {

        player.stopVideo();

      }

    </script>

  </body>

</html>

]]> Copyright 2026, 코스모스팜 <![CDATA[진짜 감사합니다 많은도움이되었습니다 ^^ ]]> https://www.cosmosfarm.com/threads/document/10117 진짜 감사합니다 많은도움이되었습니다 ^^

]]> 승주짱 Thu, 25 Aug 2016 01:39:13 +0000 HTML/CSS/웹표준 <![CDATA[직접 업로드 하신다면 유튜브가 아니기 때문에 올리신 코드는 아마 소용이 없겠군요.   html5를 지원...]]> https://www.cosmosfarm.com/threads/document/10080 직접 업로드 하신다면 유튜브가 아니기 때문에 올리신 코드는 아마 소용이 없겠군요.

 

html5를 지원하는 브라우저에서 아래와 같이 입력해보시고 테스트 해보세요.

동영상이 종료되면 alert 창이 실행되는 예제입니다.

<video id="player">
<source src="video.mp4">
</video>

<script type="text/javascript">
document.getElementById('player').addEventListener('ended', function(){
     alert('플레이 종료!');
});
</script>

 

ended 이벤트에 대한 자세항 사용법은 아래 링크를 확인해주세요.

http://www.w3schools.com/tags/av_event_ended.asp

https://msdn.microsoft.com/ko-kr/library/hh924822(v=vs.85).aspx

]]> 스레드봇 Fri, 19 Aug 2016 10:55:28 +0000 HTML/CSS/웹표준