将 HTML5 视频嵌入 WordPress 的静态首页答案

【问题标题】：Embedding HTML5 Video Into Static Front Page In WordPress将 HTML5 视频嵌入 WordPress 的静态首页
【发布时间】：2021-02-22 14:38:05
【问题描述】：

我正在尝试使用 WordPress 中的静态首页方法创建一个启动类型页面，并且我正在尝试在页面加载时播放一个四秒的视频。我知道如何让视频自动播放，这不是问题。问题是视频没有显示。

我能够通过创建 front-page.php 模板文件来创建静态首页。我放在这个文件中的代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Iron Triangle Films Splash Page</title>
  <link rel="stylesheet" href="css/styles.">
    <style>
    .mainContent{
     margin-left: 275px;
    }
    </style>
  </head>
<body>

 <div style="border:solid 1px black;"class="mainContent">

 <video id="my_video" height="500" width="700" autoplay>

 <source src=itf.mp4 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

 <source src=itf.ogv type='video/ogg; codecs="theora, vorbis"'>

  <p>Your browser does not support HTML5 video.</p>
 </video>

 </div><!--End Main Content div-->

</body>
</html>

页面加载为首页，但视频不显示。这是link to the site。

【问题讨论】：

irontrianglefilms.com/itf.mp4 HTTP 404
感谢您的回复。为什么找不到呢？文件“itf.mp4”与 front-page.php 文件位于同一目录中。它甚至不需要进入另一个文件夹，例如“视频”文件夹。它应该能够找到它。什么不见了？我会很感激的。谢谢，CM –

标签： php html wordpress wordpress-theming

【解决方案1】：

问题是你的视频文件itf.mp4不存在，所以浏览器无法播放。

浏览器在看这里：http://irontrianglefilms.com/itf.mp4

如您所见，404（以非常垃圾的 HostGator 方式 :()。

很可能您已将视频文件放在您的主题目录中，就浏览器而言，该目录不是同一个目录。您可以将文件放在您的网络根目录中（坏主意），或者正确链接到该文件：

<source src="<?php echo get_bloginfo('template_directory'); ?>/itf.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

【讨论】：

感谢您的回复。为什么找不到呢？文件“itf.mp4”与 front-page.php 文件位于同一目录中。它甚至不需要进入另一个文件夹，例如“视频”文件夹。它应该能够找到它。什么不见了？我会很感激的。谢谢，CM
Mike 我可以在 Firefox 中使用它，但在 Chrome、Safari 或 IE 中无法使用。有任何想法吗？ www.irontrianglefilms.com
没有任何改变。您的文件仍然是 404s。
在您从答案中实现我的代码后，它现在可以在所有浏览器上运行。

【解决方案2】：

我尝试在 Wordpress 的主页上制作非静音和循环视频。最后输出的是向导上的自定义代码。现在只需复制代码并更改您的视频链接即可轻松简单。

<video autoplay="" muted="" loop="" id="myVideo"><source src="https://trianglefilms.co.in/wp-content/uploads/2021/01/triangle-films-Main.mp4" type="video/mp4"></video>

【讨论】：