如何在播放前隐藏视频？

Question

我正在使用以下内容将视频放在 wordpress 网站上：

<param name="src" value="http://www.mywebsite.com/announcement.mov">
<param name="autoplay" value="true">
<param name="type" value="video/quicktime" height="560" width="950">

<embed src="http://www.mywebsite.com/announcement.mov" height="560" width="950" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">

我不喜欢这一点的部分是你可以在页面上看到视频的开始帧。如果有办法让它只显示黑色或显示空白屏幕，直到您单击播放按钮，我希望它。

Answer 1

您可能希望使用 Stack Overflow 上此线程中所述的视频占位符：How to add a splash screen/placeholder image for a YouTube video

注意一点：如果 jQuery/JavaScript 失败，视频也不会加载。

更新

在您的 HTML 中：

<img class="video-placeholder" src="placeholder.jpg" data-video="http://www.mywebsite.com/announcement.mov">

在你的 JS 文件中：

$('.video-placeholder').click(function(){
    var video = '<param name="src" value="' + $(this).attr('data-video') + '">
    <param name="autoplay" value="true">
    <param name="type" value="video/quicktime" height="560" width="950">
    <embed src="' + $(this).attr('data-video') + '" height="560" width="950" autoplay="false" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">';
    $(this).replaceWith(video);
});