Question

我正在为数字艺术课做一个简单的项目。我想做一个简单的小选择你自己的冒险游戏，在那里你看一个剪辑，然后选择最多几个不同的选项，如何做下一步。你的决定将引发一个视频，冒险将持续一段时间，玩家将逃离鬼屋或被杀。这是我第一次使用HTML5。

我需要做以下事情： 1）按下按钮时，播放某个视频。 2）视频结束后，屏幕顶部的文本块会相应更改，向玩家提供其他信息，并比剪辑本身提供更详细的解释。

现在，我只需要步骤1的帮助。我似乎无法弄清楚如何使按钮onclick命令正常工作。程序显示第一个简介视频就好了，但是当你点击任何一个按钮时根本没有反应。我最初希望使用if else button.pressed命令的内容，但我无法在HTML5中找到类似的内容。我知道不可能对我的代码进行故障排除，因为没有人可以访问我的本地文件，但我很感激任何建议。谢谢！

这是我的代码：

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spooks: Choose Your Own Adventure</title>
<script>


function $(id)
    {
    return document.getElementById(id);
    }

    //Video Source Changers

function Door()
{
    $('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4" type="video/mp4">
}


function Wander()
{
    $('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}


function Match()
{
    $('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}


</script>
</head>


<body style= "background-color: black">

<p style= "color:white">What an awful time to get stranded out in the countryside! It's raining cats and dogs out here. Hungry, freezing, exhausted and desperate, you head to the nearest visible shelter - a decrepit old mansion. Surely southern hospitality will see you safely through the night.</p>

<p>

<video width="400" controls>

  <source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">

</video>

</p>

<p>
<button onclick="Door()">This is creepy. I'll just go back through the front door.</button>

<button onclick="Wander()">Really weird, but I guess it beats the storm. The owner probably just ran off to get the lights working. I'll wander around a bit, see if I can find him.</button>

<button onclick="Match()">It'd be nice to be able to see before I make a decision one way or the other. Let's light a match...</button>


</p>
</body>

</html>

Answer 1

看起来有几个问题。

1）你的$（'电影'）。src是无效的javascript，你在行尾有一些垃圾代码（type =“video / mp4”＆gt;），行应以分号结尾。 e.g。

function Door()
{
  $('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4";
}

2）您的视频代码没有id属性，因此您实际上并未在javascript调用中引用任何内容来更新src：

<video width="400" controls id="movie">
  <source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>

我在这里放了一个更新的JSfiddle：http://jsfiddle.net/tv7pahcf/

如果在HTML5中按下了Else按钮？

1 个答案: