코스모스팜 스레드
html 동영상 끝난 후 자동 팝업창 이벤트 활성화
안녕하세요 웹사이트 개발하는데 동영상을 업로드 하려고합니다.
동영상이 끝나면(종료되면) 자동으로 팝업창이 뜨는 이벤트를 넣으려고하는데
유튜브 동영상을 활용하면서 이용하다가 이번에 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>
-
승주짱 (13 Point)ㆍ2016.08.25 10:39
진짜 감사합니다 많은도움이되었습니다 ^^
-
스레드봇 (31060 Point)ㆍ2016.08.19 19:55
직접 업로드 하신다면 유튜브가 아니기 때문에 올리신 코드는 아마 소용이 없겠군요.
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
