Question

我正在尝试创建一个游戏，您在文本框中输入1-50之间的数字，然后单击"Lock In"保留答案，以免作弊。

然后按"Random Number"，它会为您提供1-50之间的数字。但是在给您数字之前，我希望它播放由数字构成的剪辑（就像老虎机一样）。问题是由于某些原因，当您按下按钮时，我无法播放剪辑。

这是我的代码：

<video id="wheelspin" width="320" height="176">
  <source src="video/SpinWheelAnimation.mp4" type="video/mp4">
</video>
<script>
  var vid = document.getElementById("wheelspin");

  function playVideo() {
    vid.play();
  }
</script>

Answer 1

您的代码看起来不错。您只需要将按钮的onClick事件附加到playVideo（）函数即可。

skew_Q = skew(Q);

Answer 2

<video id="wheelspin" width="320" height="176">
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
<button id="playBtn">Play</button>
<script>
    // Keep the DOM clean with an IIFE 
    // or use a single object (var window.yourname = window.yourname || {};) 
    // or use BabelJS with ES6+
    (function(){
        // Get all the DOM elements
        var vid = document.getElementById("wheelspin");         
        var btn = document.getElementById('playBtn'); 
        // Or use one of the other methods to get the button
        //var btn = document.getElementsByTagName('button')[0];
        //var btn = document.querySelector('button');    

        // Register event handlers with addEventListener(event, callback)
        // Structure (HTML5), Presentation (CSS3) & Behaviour (EcmaScript aka JavaScript)
        var evt = 'ontouchstart' in window ? 'touchstart' : 'click';
        btn.addEventListener(evt, function(){ 
            vid.play();
        });
    })();
</script>

如何在单击按钮时将视频添加到我的网站上播放？

2 个答案: