嘿，你说得太对了——poster属性确实只在视频加载完成前生效，播放结束后就不管用了，单次播放完黑屏这个场景确实容易被忽略。我给你两个简单可行的方案，都能完美解决这个问题：

方案一：播放结束后停在视频第一帧 #

这个方案最省事，不需要额外的图片资源，直接让视频播放完后回到第一帧并暂停，这样就不会显示黑屏了。

修改后的完整代码如下：

<video id="targetVideo" width="400" autoplay muted playsinline style="max-width:100%;padding:0px;" poster="//cdn.shopify.com/s/files/1/0017/4227/4613/files/COST-GRAPH_450x.png?v=9334525452384790062">
  <source src="https://cdn.shopify.com/s/files/1/0017/4227/4613/files/CG1.25X_compressed.mp4?v=1596956587" type="video/mp4">
</video>

<script>
// 获取视频元素
const video = document.getElementById('targetVideo');
// 监听播放结束事件
video.addEventListener('ended', function() {
  // 把视频进度拉回第一帧
  this.currentTime = 0;
  // 暂停播放，停在第一帧
  this.pause();
});
</script>

为什么这么做？ #

当视频播放到ended状态时，浏览器默认会停在最后一帧（如果最后一帧是黑屏就会显示黑屏），我们手动把进度条拉回0，再暂停，就能让视频停在第一帧，完美替代黑屏。

如果你的海报图和第一帧不一样，想强制显示海报图的话，可以在事件里再加两行：

// 移除视频源，让浏览器重新渲染海报
this.removeAttribute('src');
this.load();

不过这个操作会重新加载视频，可能有轻微的加载延迟，根据你的需求选择就行。

方案二：播放结束后显示自定义图片 #

如果你想在视频结束后展示一张和海报/第一帧不同的图片，比如引导用户操作的图，可以用容器包裹视频和图片，默认隐藏图片，播放结束后切换显示状态。

代码示例：

<!-- 用相对定位的容器包裹，让图片能覆盖视频 -->
<div style="position: relative; max-width: 400px;">
  <video id="myVideo" width="400" autoplay muted playsinline style="max-width:100%;padding:0px; display: block;">
    <source src="https://cdn.shopify.com/s/files/1/0017/4227/4613/files/CG1.25X_compressed.mp4?v=1596956587" type="video/mp4">
  </video>
  <!-- 自定义结束图片，默认隐藏 -->
  <img 
    id="endPoster" 
    src="//cdn.shopify.com/s/files/1/0017/4227/4613/files/YOUR_CUSTOM_END_IMAGE.png" 
    style="position: absolute; top: 0; left: 0; width: 100%; display: none;"
  >
</div>

<script>
const video = document.getElementById('myVideo');
const endPoster = document.getElementById('endPoster');

video.addEventListener('ended', function() {
  // 隐藏视频
  this.style.display = 'none';
  // 显示自定义结束图片
  endPoster.style.display = 'block';
});
</script>

这个方案灵活性更高，你甚至可以把结束图片换成按钮、链接等交互元素。

小提示 #

• 记得保留playsinline属性，移动端播放视频时不会强制全屏，体验更好
• 测试时尽量在不同浏览器（Chrome、Safari、Firefox）和设备上验证，确保兼容性没问题

内容的提问来源于stack exchange，提问作者jaimish11