使用 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' );?> 更改为图像 link，例如 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 传递给它（它只会获取当前的 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;

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

Replace Poster Image with Wordpress Featured Image, using JavaScript

javascript

php

wordpress

wordpress-featured-image