在WordPress的静态首页中嵌入HTML5视频 - Embedding HTML5 Video Into Static Front Page In WordPress

Embedding HTML5 Video Into Static Front Page In WordPress

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

我可以通过创建一个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>

页面作为首页加载，但vid不显示。这是该网站的链接

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

浏览器正在查看:http://irontrianglefilms.com/itf.mp4

如你所见，404(以一种非常垃圾的HostGator方式).

很有可能你已经把视频文件放在了主题目录中，而这个目录对于浏览器来说并不是同一个目录。你可以把文件放在你的web根目录(坏主意)，或者正确地链接到文件:

<source src="<?php echo get_bloginfo('template_directory'); ?>/itf.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.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>