YouTube 영상 제어3 (view 스킨에 적용)
페이지 정보
본문
<style> .bbs-cma-video-control-btn{position:relative;width:100%;clear: both;margin:5px 0;text-align:center;} .bbs-cma-video-control-btn .btn{background-color:#202023;color:#fff;} .bbs-cma-video-control-btn .btn_youtube_player{} .bbs-cma-video-control-btn .btn_youtube_pause{} .bbs-cma-video-control-btn .btn_youtube_stop{} .bbs-cma-video-control-btn .btn_youtube_volume_mute{} .bbs-cma-video-control-btn .span_range_view_sound_volume{position:relative;float:right;} .bbs-cma-video-control-btn .span_range_view_sound_volume .rvsv_txt{} .bbs-cma-video-control-btn .span_range_view_sound_volume .range_view_sound_volume{} </style>
<div class="bbs-cma-video-container"> <iframe id="youtube_youtube_62" title="[장편소설오디오북] 흔적 / 사랑" class="youtube-player" width="700" height="450" src="https://www.youtube.com/embed/VXSFUb7MLEc?rel=0&autoplay=1&enablejsapi=1" frameborder="0" style="margin:10px 0" allow="autoplay; fullscreen" allowfullscreen=""></iframe> </div> <div class="bbs-cma-video-control-btn"> <button type="button" class="btn btn_youtube_player" onclick="viewPlayVideo(event);"> <i class="fas fa-play" aria-hidden="true"></i> <span class="span_btn_video_txt txt_youtube_player">재생</span> </button> <button type="button" class="btn btn_youtube_pause" onclick="viewPauseVideo();"> <i class="fas fa-pause" aria-hidden="true"></i> <span class="span_btn_video_txt txt_youtube_pause">일시정지</span> </button> <button type="button" class="btn btn_youtube_stop" onclick="viewStopVideo();"> <i class="fas fa-stop" aria-hidden="true"></i> <span class="span_btn_video_txt txt_youtube_stop">종료</span> </button> <button type="button" class="btn btn_youtube_volume_mute" onclick="viewVolumeMute(this);" data-y_mute="음소거 해제" data-n_mute="음소거"> <i class="fas fa-volume-mute" aria-hidden="true"></i> <span class="span_btn_video_txt txt_volume_mute">음소거</span> </button> <span class="span_range_view_sound_volume"> <span class="rvsv_txt">볼륨 : </span> <input type="range" value="50" min="0" max="100" class="range_view_sound_volume" onchange="viewSoundControl(this.value);"> <span> </div>
<script>var view_youtube_player_obj_id = 'youtube_youtube_62';</script> <script> var view_youtube_tag = document.createElement("script"); view_youtube_tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(view_youtube_tag, firstScriptTag); // 영상의 정보를 담을 view_youtube_player 전역 변수 선언 var view_youtube_player = ""; // 영상의 세부정보를 playser 변수에 담는다. function onYouTubeIframeAPIReady() { view_youtube_player = new YT.Player(view_youtube_player_obj_id, { /* <iframe> 태그 지정시 필요없음 height : '450' , width : '800' , videoId : 'E8AYyhPHRDc' , playerVars: { 'autoplay': 1 // 자동재생 , 'cc_load_policy' : 0 // 자막 0 : on, 1 : off , 'controls': 0 // 동영상 플레이어 컨트롤 표기 , 'disablekb' : 0 // 키보드 컨트롤 사용 중지 }, */ events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } 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 vew_youtube_done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !vew_youtube_done) { setTimeout(viewStopVideo, 6000); vew_youtube_done = true; } } // 재생 function viewPlayVideo(event) { view_youtube_player.playVideo(); } // 일시정지 function viewPauseVideo() { view_youtube_player.pauseVideo(); } // 종료 function viewStopVideo() { view_youtube_player.stopVideo(); } // 음소거 On / Off function viewVolumeMute(sThis) { var y_mute = $(sThis).attr('data-y_mute'); // 음소거 해제 var n_mute = $(sThis).attr('data-n_mute'); // 음소거 if(view_youtube_player.isMuted() == true) {// 음소거 view_youtube_player.unMute(); $(sThis).find('span.txt_volume_mute').html(n_mute); $(sThis).attr('title', n_mute); $(sThis).find('i.fas').removeClass('fa-volume-off'); $(sThis).find('i.fas').addClass('fa-volume-mute'); } else if(view_youtube_player.isMuted() == false) { // 음소거 해제 view_youtube_player.mute(); $(sThis).find('span.txt_volume_mute').html(y_mute); $(sThis).attr('title', y_mute); $(sThis).find('i.fas').removeClass('fa-volume-mute'); $(sThis).find('i.fas').addClass('fa-volume-off'); } } // 볼륨 조절 function viewSoundControl(number) { view_youtube_player.setVolume(number); } // HTML 문서가 모두 준비되면 /* jQuery(document).ready(function () { onYouTubeIframeAPIReady(); }); */ $(function(e) { onYouTubeIframeAPIReady(); }); </script>
추천
0
비추천
0
- 이전글 YouTube 내장 플레이어 및 플레이어 매개변수 23.04.10
- 다음글 YouTube 영상 제어2 23.04.09