<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<head>
<title>html5 video播放/暂停开关</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<video id="video1" width="420">
<source src="http://runoob.com/mp4/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<script type="text/javascript">
var myVideo = document.getElementById("video1");
function playPause() {
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
</body>
</html>var myVid = document.getElementById("video");
$('.sound-icon').click(function() {
var sta = myVid.muted;
if (sta == true) {
myVid.muted = false;
} else {
myVid.muted = true;
}
})<!--{* banner *}-->
<div class="x-banner">
<div class="owl-carousel hidden-sm hidden-xs">
<div class="banner-item">
<button onclick="playPause()" class="bofan">播放/暂停</button>
<button onclick="muted()" class="sound-icon">播放/暂停</button>
<img src="<!--{$app->ads->find(1, 1, 'uploadfiles')}-->" alt="<!--{$app->ads->find(1, 1, 'uploadfiles')}-->" class="hhahgn">
<video muted autoplay data-autoplay id="video1" class="vvideo" width="100%" height="100%" loop="loop" preload="auto" autoplay="autoplay">
<source src="<!--{$skinpath}-->assets/images/video.mp4" type="video/mp4">
</video>
</div>
<!--{foreach $app->ads->find(1) as $volist}-->
<div class="banner-item"><a href="<!--{$volist.url}-->"><img src="<!--{$volist.uploadfiles}-->" alt="<!--{$volist.adsname}-->" /></a></div>
<!--{/foreach}-->
</div>
<div class="owl-carousel visible-xs visible-sm">
<!--{foreach $app->ads->find(1) as $volist}-->
<div><a href="<!--{$volist.url}-->"><img src="<!--{$volist.uploadfiles}-->" alt="<!--{$volist.adsname}-->" /></a></div>
<!--{/foreach}-->
</div>
</div>
<script>
autoPlayAudio("vvideo");
function autoPlayAudio(id) {
var video = document.getElementsByClassName('vvideo'); //video标签id=media
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
video.load();
video.play();
}, false);
} else {
document.addEventListener("WeixinJSBridgeReady", function() {
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
video.load();
video.play();
});
}, false);
}
video.load();
video.play();
return false;
}
</script>
<script type="text/javascript">
var myVideo = document.getElementById("video1");
// 播放/暂停
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<script>
var myVid = document.getElementById("video1");
// 静音/取消静音
function muted() {
var sta = myVid.muted;
if (sta == true) {
myVid.muted = false;
} else {
myVid.muted = true;
}
}
</script>
<style>
.bofan {
position: absolute;
left: 100px;
bottom: 100px;
width: 100px;
height: 100px;
background: #000;
z-index: 99999;
}
.sound-icon {
position: absolute;
left: 300px;
bottom: 100px;
width: 100px;
height: 100px;
background: #000;
z-index: 99999;
}
</style>
<script>
$('.bbkk .bofan').click(function(){
$(this).toggleClass('aaa');
});
$('.bbkk .sound-icon').click(function(){
$(this).toggleClass('aaa');
})
</script>
.bofan {
position: absolute;
left: 100px;
bottom: 100px;
width: 100px;
height: 100px;
z-index: 99999;
width: 30px;
display: block;
outline: none;
border: none;
height: 39px;
background: url(../images/bofan.png) no-repeat center;
}
.sound-icon {
position: absolute;
left: 160px;
bottom: 100px;
width: 100px;
height: 100px;
z-index: 99999;
width: 48px;
display: block;
outline: none;
border: none;
height: 42px;
background: url(../images/no_jinyin.png) no-repeat center;
}
.bofan.aaa{
background: url(../images/no_play.png) no-repeat center;
}
.sound-icon.aaa{
background: url(../images/jinyin.png) no-repeat center;
}上一篇：微信小程序 WXSS
下一篇：产品分类过渡页