0

我在帖子中使用 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>

知道如何解决吗？！！！！

提前致谢！

4

1 回答 1

0

当您在循环外使用时，您必须将帖子 ID 传递给它（它会在循环内get_the_post_thumbnail_url获取当前帖子 ID ）：

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

有几种不同的方法可以获取当前的帖子 ID，我在下面提供了一些方法，因此您可以决定哪种方法最适合您（例如，您可能已经在使用 global $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;
于 2020-09-04T01:02:30.997 回答