Question

我成功将代码添加到wordpress header.php

<script src="video.js"></script>
<script src="videojs.ads.js"></script>
<script src="videojs-preroll.js"></script>
<link href="video-js.css" rel="stylesheet" type="text/css">
<link href="video.ads.css" rel="stylesheet" type="text/css">
<link href="videojs-preroll.css" rel="stylesheet" type="text/css">

所有调整路径正确的

然后在wordpress我创建了一个帖子并切换到html编辑器

并添加了此代码，没有预卷的代码

<video id="example_video_1" class="video-js vjs-default-skin" controls width="640"    height="264" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>

视频在wordpress中非常完美！

但要启动预卷视频，我需要添加此代码

<script>
videojs('example_video_1', {plugins:{ads:{},preroll:{src:"advertisement.mp4"}}});
</script>

然后它停止工作

我确定我需要调整wordpress的代码。

我得到了所有工作在常规html没问题

但客户端有wordpress并希望在wordpress post

中使用它

我希望有人可以提供帮助

提前致谢

Answer 1

可能是Wordpress在DOM中的视频元素之前添加了脚本。您可以将插件设置放在视频元素的data-setup属性中：

<video
  id="example_video_1"
  class="video-js vjs-default-skin"
  controls
  width="640"
  height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"plugins":{"ads":{},"preroll":{"src":"advertisement.mp4"}}}'>

请注意使用单引号和双引号 - 这很重要。

视频JS播放器与插件videojs-preroll在Wordpress的帖子

1 个答案: