Question

所以我有一次工作，最终我打破了它，现在我需要重新开始工作。

我想按下PLAY按钮时视频将开始播放。并且PLAY按钮会将其文本更改为PAUSE。然后当您再次单击它时，视频将暂停。

HTML：

<video id="myVideo" width="1024" height="576">
  <source src="myaddiction.mp4" type="video/mp4">
  <source src="myaddiction.mp4.ogg" type="video/ogg"> 
  Your browser does not support HTML5 video.
</video>

<button id="button" onclick="playPause(); ">PLAY</button>

SCRIPT：

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

function playPause() {
  vid.play();
}

function playPause() {
  vid.pause();
}




function playPause() {
  var change = document.getElementById("button");
  if (change.innerHTML == "PLAY") {
    change.innerHTML = "PAUSE";
  } else {
    change.innerHTML = "PLAY";
  }
}

这里也是其中所有内容的小提琴。如果你知道如何让视频在其中运行，那么如果你添加它就会很酷。谢谢！

https://jsfiddle.net/wb83hydn/

**编辑：目前问题是按下按钮时视频不会播放。按钮会更改文本，但视频不会执行任何操作。

Answer 1

您正在分别定义playPause个功能3次。您可能会得到一些意想不到的结果。也就是说，如果解释器没有完全错误。只需创建一个函数就可以获得更好的服务，并使用全局变量来处理播放/暂停状态的跟踪。像这样：

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

function playPause() {
  var change = document.getElementById("button");
  if (isPlaying) {
    vid.pause();
    change.innerHTML = "PLAY";
  } else {
    vid.play();
    change.innerHTML = "PAUSE";
  }
  isPlaying = !isPlaying;
}

Answer 2

将您的javascript更改为此以使其正常工作。您需要首先使用window.onLoad确保DOM加载，或者将JS放在HTML文件的末尾。

我更新了JSFiddle，但您需要一个有效的在线视频文件才能使其正常运行。

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

function play() {
  vid.play();
}

function pause() {
  vid.pause();
}

function playPause() {
  var change = document.getElementById("button");
  if (change.innerHTML == "PLAY") {
    change.innerHTML = "PAUSE";
    play();
  } else {
    change.innerHTML = "PLAY";
    pause();
  }
}

https://jsfiddle.net/wb83hydn/3/

Answer 3

通过同一按钮播放和暂停视频

import pickle

name = 'name'
score = 'score'
top5 = []
top5.append([name, score])

with open('filename.pickle', 'wb') as handle:
    pickle.dump(top5, handle, protocol=pickle.HIGHEST_PROTOCOL)

with open('filename.pickle', 'rb') as handle:
    b = pickle.load(handle)
    print(b) # b is your original object top5

制作相同的按钮播放/暂停html5视频

3 个答案: