使用JavaScript将海报图像替换为Wordpress特色图像

Question

我在我的帖子中使用Plyr视频播放器，我希望海报图像自动成为特色图像。

我使用了下面的JavaScript，但是它不工作！

​

document.addEventListener('DOMContentLoaded', () => { 
const controls = [
    'play-large',
    'restart',
    'play',
    'progress',
    'current-time',
    'duration',
    'mute',
    'volume',
    'captions',
    'settings',
    'pip',
    'fullscreen'
];

const player = new Plyr('#player', { controls });
  
  // Expose
  window.player = player;

  // Bind event listener
  function on(selector, type, callback) {
    document.querySelector(selector).addEventListener(type, callback, false);
  }
});
(function() {
  document.getElementsByClassName("post_plyr")[0].setAttribute("poster", "<?php echo get_the_post_thumbnail_url( null, 'full' );?>"); 
        })();

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<link rel="stylesheet" href="https://mhdizmni.ir/plyr-style.css"/>

<div class="mhdizmni_plyr">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player" class="post_plyr">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="480">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
                <track kind="captions" label="Persian" srclang="fa" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
                    default>
                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt">
            </video>
</div>

​

虽然它不能以这种方式工作，但如果我将<?php echo get_the_post_thumbnail_url( null, 'full' );?>更改为图像链接(例如，https://mhdizmni.ir/plyr/mhdizmniPlyrPoster.jpg )，它可以工作(请参阅下面的工作情况)，但我需要动态版本。

​

document.addEventListener('DOMContentLoaded', () => { 
const controls = [
    'play-large',
    'restart',
    'play',
    'progress',
    'current-time',
    'duration',
    'mute',
    'volume',
    'captions',
    'settings',
    'pip',
    'fullscreen'
];

const player = new Plyr('#player', { controls });
  
  // Expose
  window.player = player;

  // Bind event listener
  function on(selector, type, callback) {
    document.querySelector(selector).addEventListener(type, callback, false);
  }
});
(function() {
  document.getElementsByClassName("post_plyr")[0].setAttribute("poster", "https://mhdizmni.ir/plyr/mhdizmniPlyrPoster.jpg"); 
        })();

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<link rel="stylesheet" href="https://mhdizmni.ir/plyr-style.css"/>

<div class="mhdizmni_plyr">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player" class="post_plyr">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="480">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
                <track kind="captions" label="Persian" srclang="fa" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
                    default>
                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt">
            </video>
</div>

​

你知道怎么修吗？！

提前感谢！

Answer 1

当您在循环之外使用get_the_post_thumbnail_url时，必须将post id传递给它(它on'y在循环中获取当前的post id )：

document.getElementsByClassName("post_plyr")[0]
        .setAttribute("poster", "<?php echo get_the_post_thumbnail_url( $post_id, 'full' );?>"); 

获取当前post id有几种不同的方法，我在下面列出了一些，这样您就可以决定哪种方法最适合您(例如，您可能已经在使用全局$post，您可能更喜欢使用它)：

// Use the get_queried_object_id function
$post_id = get_queried_object_id();

// OR Access the global post
global $post; $post_id = echo $post->ID;

// OR access the current query
global $wp_query; $post_id = $wp_query ->post->ID;