![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Ticket #38678: 38678.2.diff
| File 38678.2.diff, 9.2 KB (added by , 10 years ago) |
|---|
-
src/wp-content/themes/twentyseventeen/style.css
4149 4149 padding: 0; 4150 4150 } 4151 4151 } 4152 4153 /* For testing purposes. */ 4154 .wp-custom-header-video-button { 4155 background: red; 4156 position: relative; 4157 } -
src/wp-includes/js/wp-custom-header.js
1 ( function( window, settings ) {1 ( function( window, settings ) { 2 2 3 3 if ( ! ( 'addEventListener' in window ) ) { 4 4 // Fail gracefully in unsupported browsers. … … 5 5 return; 6 6 } 7 7 8 function wpCustomHeader() { 9 var handlers = { 8 function trigger( target, name ) { 9 var e = new Event( name ); 10 target.dispatchEvent( e ); 11 } 12 13 function CustomHeader() { 14 this.handlers = { 10 15 nativeVideo: { 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 button = document.createElement( 'button' ); 27 34 28 if ( supportsVideo() ) { 29 for ( var id in handlers ) { 30 var handler = handlers[ id ]; 35 button.setAttribute( 'type', 'button' ); 36 button.setAttribute( 'id', 'wp-custom-header-video-button' ); 37 button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' ); 38 button.setAttribute( 'aria-hidden', true ); 39 button.innerHTML = settings.l10n.play; 31 40 32 if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {33 handler.callback( settings );41 this.container = document.getElementById( 'wp-custom-header' ), 42 this.button = button; 34 43 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 } 44 if ( this.supportsVideo() ) { 45 for ( var id in this.handlers ) { 46 var handler = this.handlers[ id ]; 40 47 41 break; 42 } 48 if ( this.handlers.hasOwnProperty( id ) && handler.test( settings ) ) { 49 activeHandler = handler.callback.call( this, this, settings ); 50 51 // Dispatch custom event when the video is loaded. 52 trigger( document, 'wp-custom-header-video-loaded' ); 53 break; 43 54 } 44 55 } 56 57 this.container.addEventListener( 'play', function() { 58 button.className = 'wp-custom-header-video-button wp-custom-header-video-play'; 59 button.innerHTML = settings.l10n.pause; 60 }); 61 62 this.container.addEventListener( 'pause', function() { 63 button.className = 'wp-custom-header-video-button wp-custom-header-video-pause'; 64 button.innerHTML = settings.l10n.play; 65 }); 66 67 button.addEventListener( 'click', function() { 68 if ( activeHandler.paused() ) { 69 activeHandler.play(); 70 } else { 71 activeHandler.pause(); 72 } 73 }); 45 74 } 75 }; 46 76 47 function supportsVideo() {48 49 if ( window.innerWidth < settings.minWidth|| window.innerHeight < settings.minHeight ) {50 51 77 CustomHeader.prototype.supportsVideo = function() { 78 // Don't load video on small screens. @todo: consider bandwidth and other factors. 79 if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) { 80 return false; 81 } 52 82 53 return true; 83 return true; 84 }; 85 86 CustomHeader.prototype.setVideo = function( node ) { 87 this.container.innerHTML = ''; 88 this.container.appendChild( node ); 89 this.container.appendChild( this.button ); 90 }; 91 92 function NativeHandler( header, settings ) { 93 if ( ! ( this instanceof NativeHandler ) ) { 94 return new NativeHandler( header, settings ); 54 95 } 55 96 56 return {57 handlers: handlers,58 initialize: initialize,59 supportsVideo: supportsVideo60 };61 }62 63 function nativeHandler( settings ) {64 97 var video = document.createElement( 'video' ); 65 66 98 video.id = 'wp-custom-header-video'; 67 99 video.autoplay = 'autoplay'; 68 100 video.loop = 'loop'; … … 70 102 video.width = settings.width; 71 103 video.height = settings.height; 72 104 73 video.addEventListener( 'click', function() { 74 if ( video.paused ) { 75 video.play(); 76 } else { 77 video.pause(); 78 } 105 video.addEventListener( 'play', function() { 106 trigger( header.container, 'play' ); 79 107 }); 80 108 81 settings.container.innerHTML = ''; 82 settings.container.appendChild( video ); 109 video.addEventListener( 'pause', function() { 110 trigger( header.container, 'pause' ); 111 }); 112 113 header.setVideo( video ); 83 114 video.src = settings.videoUrl; 115 116 return { 117 play: video.play.bind( video ), 118 119 pause: video.pause.bind( video ), 120 121 paused: function() { 122 return video.paused; 123 } 124 }; 84 125 } 85 126 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];127 function YouTubeHandler( header, settings ) { 128 if ( ! ( this instanceof YouTubeHandler ) ) { 129 return new YouTubeHandler( header, settings ); 130 } 90 131 132 var player, 133 YT; 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 = window.YT; 178 YT.ready( loadVideo ); 133 179 } else { 134 180 var tag = document.createElement( 'script' ); 135 181 tag.src = 'https://www.youtube.com/player_api'; 136 tag.onload = function () { loadVideo(); }; 182 tag.onload = function () { 183 YT = window.YT; 184 YT.ready( loadVideo ); 185 }; 186 137 187 document.getElementsByTagName( 'head' )[0].appendChild( tag ); 138 188 } 189 190 return { 191 play: function() { 192 player.playVideo(); 193 }, 194 195 pause: function() { 196 player.pauseVideo(); 197 }, 198 199 paused: function() { 200 return YT.PlayerState.PAUSED === player.getPlayerState(); 201 } 202 }; 139 203 } 140 204 141 205 window.wp = window.wp || {}; 142 window.wp.customHeader = new wpCustomHeader();143 document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize , false );206 window.wp.customHeader = new CustomHeader(); 207 document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false ); 144 208 145 209 if ( 'customize' in window.wp ) { 146 210 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 ) ) {
