html5 video播放/暂停开关

2022-10-10 15:08:43 浏览：2066 作者：保利尼奥

html5 video播放/暂停开关<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html;charset=utf8"> <head> <...

html5 video播放/暂停开关

<!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

下一篇：产品分类过渡页