我正在WordPress帖子页面上尝试以下代码：
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://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: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 1, 'controls': 0 },
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.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function playVideo() {
player.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
function stopVideo() {
player.stopVideo();
}
function loadVideoById(val) {
player.loadVideoById(val, 0, "large");
}
</script>
然而，什么也没有显示。
这种代码注入最好使用Shortcode。只需使用wp_enqueue_script加载Iframe API，而不使用document.createElement，脚本的其余部分由快捷代码打印。PHP heredoc使构建大型可配置HTML字符串变得容易。
帖子/页面内的短代码用法为：[ytplayer id="M7lc1UVf-VE"]
add_shortcode( 'ytplayer', 'print_yt_player' );
function print_yt_player( $atts ) {
wp_enqueue_script( 'yt-iframe', 'https://www.youtube.com/iframe_api' );
$yt_id = $atts['id'];
$html = <<<HTML
<div id="player"></div>
<script>
var player, done = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '$yt_id',
playerVars: { 'autoplay': 1, 'controls': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function playVideo() {
player.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
function stopVideo() {
player.stopVideo();
}
function loadVideoById(val) {
player.loadVideoById(val, 0, "large");
}
</script>
HTML;
return $html;
}
保存页面/帖子时，很可能会插入<p>标记。两种选择：
- 禁用wpautop
-
包括压缩的脚本（在单行上），如下所示：
<div id="player"></div> <script>var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var player;function onYouTubeIframeAPIReady(){player=new YT.Player("player",{height:"390",width:"640",videoId:"M7lc1UVf-VE",playerVars:{autoplay:1,controls:0},events:{onReady:onPlayerReady,onStateChange:onPlayerStateChange}})}function onPlayerReady(a){a.target.playVideo()}var done=!1;function onPlayerStateChange(a){a.data!=YT.PlayerState.PLAYING||done||(setTimeout(stopVideo,6E3),done=!0)}function playVideo(){player.playVideo()}function pauseVideo(){player.pauseVideo()}function stopVideo(){player.stopVideo()}function loadVideoById(a){player.loadVideoById(a,0,"large")};</script>`