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

我正在尝试创建一个游戏，你在文本框中输入一个介于1-50之间的数字，然后单击

“锁定”

以保留你的答案，这样你就不会作弊了

然后按“随机数”，它会给你一个介于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>

var vid=document.getElementById（“wheelspin”）；
函数playVideo（）{
视频播放（）；
}

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

玩
var vid=document.getElementById（“wheelspin”）；
函数playVideo（）{
视频播放（）；
}

玩
//用生命保持DOM清洁
//或者使用单个对象（var window.yourname=window.yourname | |{}；）
//或者在ES6中使用BabelJS+
（功能（）{
//获取所有DOM元素
var vid=document.getElementById（“wheelspin”）；
var btn=document.getElementById（'playBtn'）；
//或者使用其他方法之一获取按钮
//var btn=document.getElementsByTagName（'button'）[0]；
//var btn=document.querySelector（'button'）；
//使用addEventListener注册事件处理程序（事件，回调）
//结构（HTML5）、表示（CSS3）和行为（EcmaScript又名JavaScript）
var evt='ontouchstart'窗口中的'touchstart'：'click'；
btn.addEventListener（evt，函数（）{
视频播放（）；
});
})();

当您单击按钮时，开发人员工具控制台中是否有任何消息/错误/警告？感谢您造成堆栈溢出！在未来，考虑在代码示例中提供一些解释和/或内联文档，以更好地恭维您的回答，为增值的编辑做了编辑，获得了编辑徽章，并且在发布了这个评论后，只剩下了9个，我是一个评论员。不能在我自己的岗位上投票吗？这个答案非常有用。哈哈。

<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>