Question

在我的网站中，我有一个背景视频。现在我想添加两个按钮，一个将停止视频/启动视频，一个将停止视频并将其替换为图像。这是我的网站 - site link

有人可以帮助我吗？

由于

Answer 1

您需要创建两个按钮并根据需要设置样式，但以下是启动/停止视频所需的代码：

// assuming we're inside of your click listener callback
var video = document.querySelector('video');
if (video.playing) {
    video.pause() // will bring the video to a halt
    video.currentTime = 0; // brings it back to the beginning 
} else {
    video.play();
}

以下是使用图片替换视频所需的代码：

// assuming we're inside of your click listener callback
var video = document.querySelector('video');
var newImage = document.createElement('img');
newImage.src = 'source-of-your-image.jpg';
video.parentNode.insertBefore(newImage, video); // inserts img into DOM
video.parentNode.removeChild(video); // removes the video

Answer 2

你需要这样的代码来获取ID和播放/暂停

的元素

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

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

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

HTML可以是[href]：

<a href="javascript:void(0);" onclick="playVid()">Play</a>
<a href="javascript:void(0);" onclick="pauseVid()">Pause</a>

要显示图片，您可以使用视频html5标记的poster属性。图像将一直显示，直到视频加载并点击播放为止，您可以通过重新加载视频来显示它：

var vid = document.getElementById("myVideo"); 
function displayPoster() {
    vid.load();
}

需要JavaScript帮助才能更改和停止背景视频

2 个答案: