![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Ticket #38678: 38678.1.diff
| File 38678.1.diff, 9.0 KB (added by , 10 years ago) |
|---|
-
src/wp-content/themes/twentyseventeen/style.css
4141 4141 padding: 0; 4142 4142 } 4143 4143 } 4144 4145 /* For testing purposes. */ 4146 .wp-custom-header-video-button { 4147 background: red; 4148 position: relative; 4149 } -
src/wp-includes/js/wp-custom-header.js
5 5 return; 6 6 } 7 7 8 function wpCustomHeader() { 9 var handlers = { 10 nativeVideo: { 8 function trigger( target, name ) { 9 var e = new Event( name ); 10 target.dispatchEvent( e ); 11 } 12 13 function CustomHeader() { 14 this.handlers = { 15 native: { 11 16 test: function( settings ) { 12 17 var video = document.createElement( 'video' ); 13 18 return video.canPlayType( settings.mimeType ); 14 19 }, 15 callback: nativeHandler20 callback: NativeHandler 16 21 }, 17 22 youtube: { 18 23 test: function( settings ) { 19 24 return 'video/x-youtube' === settings.mimeType; 20 25 }, 21 callback: youtubeHandler26 callback: YouTubeHandler 22 27 } 23 28 }; 29 } 24 30 25 function initialize() { 26 settings.container = document.getElementById( 'wp-custom-header' ); 31 CustomHeader.prototype.initialize = function() { 32 var activeHandler, 33 header = this, 34 button = document.createElement( 'button' ); 27 35 28 if ( supportsVideo() ) { 29 for ( var id in handlers ) { 30 var handler = handlers[ id ]; 36 button.setAttribute( 'type', 'button' ); 37 button.setAttribute( 'id', 'wp-custom-header-video-button' ); 38 button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' ); 39 button.setAttribute( 'aria-hidden', true ); 40 button.innerHTML = settings.l10n.play; 31 41 32 if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {33 handler.callback( settings );42 this.container = document.getElementById( 'wp-custom-header' ), 43 this.button = button; 34 44 35 // Set up and dispatch custom event when the video is loaded. 36 if ( 'dispatchEvent' in window ) { 37 var videoLoaded = new Event( 'wp-custom-header-video-loaded' ); 38 document.dispatchEvent( videoLoaded ); 39 } 45 if ( this.supportsVideo() ) { 46 for ( var id in this.handlers ) { 47 var handler = this.handlers[ id ]; 40 48 41 break; 42 } 49 if ( this.handlers.hasOwnProperty( id ) && handler.test( settings ) ) { 50 activeHandler = handler.callback.call( this, this, settings ); 51 52 // Dispatch custom event when the video is loaded. 53 trigger( document, 'wp-custom-header-video-loaded' ); 54 break; 43 55 } 44 56 } 57 58 this.container.addEventListener( 'play', function() { 59 button.className = 'wp-custom-header-video-button wp-custom-header-video-play'; 60 button.innerHTML = settings.l10n.pause; 61 }) 62 63 this.container.addEventListener( 'pause', function() { 64 button.className = 'wp-custom-header-video-button wp-custom-header-video-pause'; 65 button.innerHTML = settings.l10n.play; 66 }); 67 68 button.addEventListener( 'click', function() { 69 if ( activeHandler.paused() ) { 70 activeHandler.play(); 71 } else { 72 activeHandler.pause(); 73 } 74 }); 45 75 } 76 }; 46 77 47 function supportsVideo() {48 49 50 51 78 CustomHeader.prototype.supportsVideo = function() { 79 // Don't load video on small screens. @todo: consider bandwidth and other factors. 80 if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) { 81 return false; 82 } 52 83 53 return true; 84 return true; 85 }; 86 87 CustomHeader.prototype.setVideo = function( node ) { 88 this.container.innerHTML = ''; 89 this.container.appendChild( node ); 90 this.container.appendChild( this.button ); 91 }; 92 93 function NativeHandler( header, settings ) { 94 if ( ! ( this instanceof NativeHandler ) ) { 95 return new NativeHandler( header, settings ); 54 96 } 55 97 56 return {57 handlers: handlers,58 initialize: initialize,59 supportsVideo: supportsVideo60 };61 }62 63 function nativeHandler( settings ) {64 98 var video = document.createElement( 'video' ); 65 66 99 video.id = 'wp-custom-header-video'; 67 100 video.autoplay = 'autoplay'; 68 101 video.loop = 'loop'; … … 70 103 video.width = settings.width; 71 104 video.height = settings.height; 72 105 73 video.addEventListener( 'click', function() { 74 if ( video.paused ) { 75 video.play(); 76 } else { 77 video.pause(); 78 } 106 video.addEventListener( 'play', function() { 107 trigger( header.container, 'play' ); 79 108 }); 80 109 81 settings.container.innerHTML = ''; 82 settings.container.appendChild( video ); 110 video.addEventListener( 'pause', function() { 111 trigger( header.container, 'pause' ); 112 }); 113 114 header.setVideo( video ); 83 115 video.src = settings.videoUrl; 116 117 return { 118 play: video.play.bind( video ), 119 120 pause: video.pause.bind( video ), 121 122 paused: function() { 123 return video.paused; 124 } 125 }; 84 126 } 85 127 86 function youtubeHandler(settings ) {87 // @link http://stackoverflow.com/a/2772841788 var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,89 videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1];128 function YouTubeHandler( header, settings ) { 129 if ( ! ( this instanceof YouTubeHandler ) ) { 130 return new YouTubeHandler( header, settings ); 131 } 90 132 133 var player; 134 91 135 function loadVideo() { 92 var YT = window.YT || {}; 136 var video = document.createElement( 'div' ), 137 // @link http://stackoverflow.com/a/27728417 138 VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/; 93 139 94 YT.ready(function() { 95 var video = document.createElement( 'div' ); 96 video.id = 'wp-custom-header-video'; 97 settings.container.innerHTML = ''; 98 settings.container.appendChild( video ); 140 video.id = 'wp-custom-header-video'; 141 header.setVideo( video ); 99 142 100 new YT.Player( video, { 101 height: settings.height, 102 width: settings.width, 103 videoId: videoId, 104 events: { 105 onReady: function( e ) { 106 e.target.mute(); 107 }, 108 onStateChange: function( e ) { 109 if ( YT.PlayerState.ENDED === e.data ) { 110 e.target.playVideo(); 111 } 143 player = new YT.Player( video, { 144 height: settings.height, 145 width: settings.width, 146 videoId: settings.videoUrl.match( VIDEO_ID_REGEX )[1], 147 events: { 148 onReady: function( e ) { 149 e.target.mute(); 150 }, 151 onStateChange: function( e ) { 152 if ( YT.PlayerState.PLAYING === e.data ) { 153 trigger( header.container, 'play' ); 154 } else if ( YT.PlayerState.PAUSED === e.data ) { 155 trigger( header.container, 'pause' ); 156 } else if ( YT.PlayerState.ENDED === e.data ) { 157 e.target.playVideo(); 112 158 } 113 },114 playerVars: {115 autoplay: 1,116 controls: 0,117 disablekb: 1,118 fs: 0,119 iv_load_policy: 3,120 loop: 1,121 modestbranding: 1,122 //origin: '',123 playsinline: 1,124 rel: 0,125 showinfo: 0126 159 } 127 }); 160 }, 161 playerVars: { 162 autoplay: 1, 163 controls: 0, 164 disablekb: 1, 165 fs: 0, 166 iv_load_policy: 3, 167 loop: 1, 168 modestbranding: 1, 169 playsinline: 1, 170 rel: 0, 171 showinfo: 0 172 } 128 173 }); 129 174 } 130 175 131 176 if ( 'YT' in window ) { 132 loadVideo();177 YT.ready( loadVideo ); 133 178 } else { 134 179 var tag = document.createElement( 'script' ); 135 180 tag.src = 'https://www.youtube.com/player_api'; 136 tag.onload = function () { loadVideo(); };181 tag.onload = function () { YT.ready( loadVideo ); }; 137 182 document.getElementsByTagName( 'head' )[0].appendChild( tag ); 138 183 } 184 185 return { 186 play: function() { 187 player.playVideo(); 188 }, 189 190 pause: function() { 191 player.pauseVideo(); 192 }, 193 194 paused: function() { 195 return YT.PlayerState.PAUSED === player.getPlayerState(); 196 } 197 } 139 198 } 140 199 141 200 window.wp = window.wp || {}; 142 window.wp.customHeader = new wpCustomHeader();143 document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize , false );201 window.wp.customHeader = new CustomHeader(); 202 document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false ); 144 203 145 204 if ( 'customize' in window.wp ) { 146 205 wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) { -
src/wp-includes/theme.php
1381 1381 'height' => absint( $header->height ), 1382 1382 'minWidth' => 900, 1383 1383 'minHeight' => 500, 1384 'l10n' => array( 1385 'pause' => __( 'Pause' ), 1386 'play' => __( 'Play' ), 1387 ), 1384 1388 ); 1385 1389 1386 1390 if ( preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video_url ) ) {
