Question

我在W3 html编辑器中尝试了以下代码：

主要目标：
（该代码几乎播放mp4视频，并允许用户通过点击视频屏幕暂停/播放 - 没有显示任何控件）它在html文件中正常工作。

我想将此代码添加到我的Wordpress网站，但<script>部分不起作用。我去了Wordpress帮助部分尝试将Javascript合并到我的网站中。有些说明并不明显。我真的很感激，如果有人可以给我一些逐步的方法，使下面的代码在Wordpress中工作。

我正在使用WordPress版本4.3.1

<!DOCTYPE html> 
<html> 
<body>
<! Within the WordPress text editor, there's no need for the <html> & <body> tags >

<video id="myVideo" width="320" height="176" autoplay>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<script type="text/javascript"> 

var vid = document.getElementById("myVideo"); 
var isPlaying = true;

vid.onclick = function playVid() {

    if (isPlaying == false){
       myVideo.play(); 
       isPlaying = true;}

    else if (isPlaying == true){
       myVideo.pause(); 
       isPlaying = false; }
} 
</script> 

<! Within the WordPress text editor, there's no need for the <html> & <body> tags >
</body> 
</html>

Answer 1

var vid = document.getElementById("myVideo");

 if (isPlaying == false){
       myVideo.play(); 
       isPlaying = true;}

    else if (isPlaying == true){
       myVideo.pause(); 
       isPlaying = false; }

您的变量为vid并且您使用myVideo来呼叫play()和pause()这是一个身份

Answer 2

尝试将您的脚本放在window.onload：

中

window.onload = function() {
    var vid = document.getElementById("myVideo"); 
    var isPlaying = true;

    vid.onclick = function playVid() {

        if (isPlaying == false) {
           myVideo.play(); 
           isPlaying = true;
        }
        else if (isPlaying == true) {
           myVideo.pause(); 
           isPlaying = false;
       }
    } 
};

Answer 3

感谢您的建议

在等待回复的同时，我设法让它发挥作用。

如果您使用wordpress构建网站。您可以选择添加新页面/或帖子，在仪表板中可以在可视模式或文本（html）模式下进行编辑。起初我在该文本中运行<script>但没有成功。

我做的是我去了Wordpress主题编辑器（仪表板菜单 - ＆gt; Appearance-＆gt;编辑器并将我的脚本直接放在我主题的一个模板页面中 - 即组成你网站的php文件）。我不得不玩一点来确定什么文件做什么，但最后，我想出来了。我粘贴了我的代码，运行正常。

我不知道wordpress文本编辑器的处理是什么......

将脚本代码添加到Wordpress

3 个答案: