Question

我很难调用JavaScript函数来使用按钮元素播放视频。我的函数脚本如下：

    <button onclick = "PlayVid()">Play</button>
        <button onclick = "PauseVid()">Pause</button>
        <button onclick = "MaxScreen()">Full Screen</button>
        <button onclick = "NorScreen()">Normal Size</button>
        <div class = "video">
        <video>
            <source src="YellowEyePenguinVid.mp4" type="video/mp4"> 
            </video>
        </div>




    <script>
    var Video = document.getElementById("YellowEyePenguinVid"); 
        function PlayVid()
       {
            vid.play(); 
       }
        function PauseVid()
        {
            vid.pause();
        }
        function MaxScreen() 
        {
            Video.width = 560;
        }
        function NorScreen()
        {   
            Video.width = 260;  <!-- Brings video back to original size -->
        }
        </script>

我已经声明了每个按钮应该调用的功能，但它们没有响应。我也试过引用括号内的视频名称，但这也不起作用。有人能指出我哪里出错了吗？这是我在我的网站上拥有的其他JS的布局，并且功能被成功调用。

由于

Answer 1

用此

替换您的功能

<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>

Answer 2

试试这个代码段。我认为播放器的某些部分缺失，这就是play() , pause(),和width()未定义的原因。

解决方案

替换

vid.play(); and vid.pause();

与

Video.play(); and Video.pause();

因为您已将变量调用为Video，而不是vid。

＆＃13;

var Video = document.getElementById("YellowEyePenguinVid");

function PlayVid() {
  Video.play();
}

function PauseVid() {
  Video.pause();
}

function MaxScreen() {
  Video.width = 560;
}

function NorScreen() {
  Video.width = 260; // Brings video back to original size
}

＆＃13;

<button onclick="PlayVid()">Play</button>
<button onclick="PauseVid()">Pause</button>
<button onclick="MaxScreen()">Full Screen</button>
<button onclick="NorScreen()">Normal Size</button>
<div class="video">
  <video>
	<source src="YellowEyePenguinVid.mp4" type="video/mp4">         
  </video>
</div>

＆＃13;

Answer 3

不应该这些：

   function PlayVid()
   {
       Video.play(); //instead of vid.play()  
   }
    function PauseVid()
    {
        Video.pause();  //instead of vid.pause()
    }

如果您在控制台中有错误消息，请将其粘贴到此处，如果这样可以解决您的问题，则可能会出现如下日志：

can't read property play of undefined

Answer 4

也许你没有脚本链接

你有两个选择： 1。在titel之后在页面上写脚本 2。写在javascript fille上并放一个链接在标题下小费：对功能发出警报以确定其是否正常工作！

Answer 5

很少有东西需要查看，

您没有将id属性提供给video代码。
您使用＆＃34; V＆＃34;创建了一个名为Video的实例资本，但实际上，您使用video作为小案例

尝试下面的代码，

＆＃13;

 <!DOCTYPE html>
    <html>
    <body>
      <button onclick="PlayVid()">Play</button>
      <button onclick="PauseVid()">Pause</button>
      <button onclick="MaxScreen()">Full Screen</button>
      <button onclick="NorScreen()">Normal Size</button>
      <div class="video">
    
        <video id="myVideo" width="320" height="176">
          <source src="https://www.w3schools.com/tags/movie.ogg" type="video/mp4"> Your browser does not support HTML5 video.
        </video>
      </div>
    
      <script>
        var vid = document.getElementById("myVideo");
    
        function PlayVid() {
          vid.play();
        }
    
        function PauseVid() {
          vid.pause();
        }
    
        function MaxScreen() {
          vid.width = 560;
        }
    
        function NorScreen() {
          vid.width = 260; <!-- Brings video back to original size -->
        }
      </script>
      <p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
    </body>
    
    </html>

＆＃13;

为了进行视觉测试，我使用了实时视频源。您可以根据自己的意愿替换来源

使用按钮元素

5 个答案: