HTML5中如何通过点击一张图片对网页背景视频进行控制？
我写了一段代码，目的是通过点击一张图片实现背景视频的声音控制，求大神指导指导啊！以下是相关代码
<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">
关于视频的播放控制需要用到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();
}
}本回答被提问者和网友采纳
怎么用html代码实现通过一张图片(点击图片)来链接一段视频,自己本地上...
你把视频传到优酷，新浪或是其他视频网站，之后取得视频的嵌入地址，把他嵌入在你制作的网页中。主页面就是你的图片加上超链接，第二个页面就是嵌入的视频地址。不就可以了。这个是点击图片连接视频的代码 <a href="连接视频页面地址" > <img border="0" src="图片路径地址"> <\/a> 优酷视频的代...
html里如何点击图片弹出视频播放
1、首先在电脑上启动DW网页编辑器，新建一个html网页。2、然后在body中插入一个div【<div><\/div>】,并在head中引入CSS【<style type="text\/css"><\/style>】。3、然后给DIV定义一个CSS，设置宽高属性等，并写一段文字。4、接着在样式中，加入禁止选择文字的样式。5、最后保存网页并刷新后，再...
css和js怎么控制html点击一张小图片就显示一张大图片?
第一种方法：将三张大图放在div里面，这三个div大小还有别的属性都一样，但是默认是隐藏的，display：none；隐藏 display：block；显示 然后点击一张图片，对应的大图div显示出来，点击第二张，第一个大图div隐藏，第二个大图div显示。第二种方法，只有一个大的div，里面放<img>标签，但是src也就是路...
如何在html中实现鼠标经过另一张图片时显示它
1、准备切换图片素材，一般是两张，如图，放入img文件夹，跟HTML同级。1。准备切换图片素材，一般是两个，如图，放在img文件夹里，和HTML一个级别。2、然后用img嵌入到网页，嵌入其中的一张，另外一张待会切换。2.然后用img嵌入到网页中，嵌入其中一个，以后再切换另一个。3.如图，现在是静态的，鼠标...
HTML5中video标签如何使用
设置视频封面图片时，使用poster属性指定图片路径，该图片主要用于视频加载阶段的预览展示，适用于第一帧未加载完毕、预加载选项设置为无或未能找到指定视频文件的情形。综上所述，通过灵活运用video标签及其相关属性，你可以轻松在网页中实现高质量的视频播放功能。掌握这些技巧将有助于你在HTML5开发中，提供...
网页设计中怎么让一张图片填充满整个画面 ?
1、如果楼主只是将其当做一张图片显示，可以通过css控制，如img{width:100%;height:100%;}.否则需要将其作为网页背景的话可以试试如下方法：2、如果这张图片为背景图片由于背景图片不具有伸缩性，只能通过别的方法绕着解决，在ie中可以用<body style="filter:progid:dximagetransform.microsoft.alphaimage...
在HTML5中,视频应如何播放?
首先，HTML5的video标签是最简单和最常见的方式。你只需在HTML代码中添加一个video标签，然后通过src属性指定视频文件的路径。例如：您的浏览器不支持Video标签。这段代码会在支持的浏览器中显示一个视频播放器，用户可以点击播放、暂停等控制按钮。如果浏览器不支持video标签，就会显示标签内的文字。其次，...
html鼠标点击切换图片?
5、准备一部手机，可以到应用商店里面下载好“表情in”app，下载完毕后，点击“打开”。进入app后，点击“制作隐藏图片”。html中如何鼠标点击更换背景图片1、在ue编辑器中新建一个空白的html文件，css文件，js文件。在ue编辑器中输入以下html代码。在ue编辑器中输入以下css代码。在ue编辑器中输入以下js...
html5 中的 video 如何隐藏底部的全屏按钮或控制条
可以通过更改#document片段的CSS来实现这一点，这些是DOM1规范，所有浏览器都支持。以下解决方案是特定于webkit的 video::-webkit-media-controls-fullscreen-button { display: none;} video::-webkit-media-controls-play-button {} video::-webkit-media-controls-timeline {} video::-webkit-media-...
如何解决HTML5微信播放全屏问题的方法
或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。preload="auto" ：属性规定在页面加载后载入视频。webkit-playsinline和playsinline：视频播放时局域播放，不脱离文档流 。但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES ...
