HTML5中如何通过点击一张图片对网页背景视频进行控制？

Question

我写了一段代码，目的是通过点击一张图片实现背景视频的声音控制，求大神指导指导啊！以下是相关代码
<script type="text/javascript">
window.onload = function(){
var Control_Sound = document.getElementById("Control_Sound");
var Sound = document.getElementsByTagName('video')[0].getAttribute('/*此处未写*/');
console.log(Sound.value);
Control_Sound.onclick = function(){
if(Sound){/*此处未写*/
}
else {/*此处未写*/
}
}
}
</script>

<style type="text/css">
body video{
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -2;
background: no-repeat;
background-size: cover;
}
</style>
<video autoplay="autoplay" loop="loop" poster="2.html" >
<source src="2017天猫双十一广告视频合集_标清.mp4" type="video/mp4">
</video>
<img src="Sound.png" id="Control_Sound">

Answer 1

首先要设置video的预览图，这时<video> 中的poster属性很好的完成了这个工作。
关于视频的播放控制需要用到video的dom事件，这里先不详述了，以后有机会再将其详细属性搬运过来。这里主要运用到了play() ；pause()这两个事件。
下面是一个自己这两天写的通过点击视频预览图实现视频播放或暂停
HTML部分：
<div class="video_main dw">
<ul>
<li class="video_main_video left">
<video id="videoPlay1" width="262" height="195" src="video/audio.mp4" poster="img/video.jpg" loop="loop" x-webkit-airplay="true" webkit-playsinline="true">
您的浏览器暂不支持播放该视频，请升级至最新版浏览器。 </video>
</li>
</ul>
</div> 123456789

js部分:
var video1=document.getElementById("cideoPlay1");

video1.onclick=function(){
if(video1.paused){
video1.play();
}else{
video1.pause();
}
}本回答被提问者和网友采纳