JavaScript怎么实现控制视频

这篇“JavaScript怎么实现控制视频”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript怎么实现控制视频”文章吧。
成都创新互联公司自2013年起，先为湟中等服务建站，湟中等地企业，进行企业商务咨询服务。为湟中企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
具体代码如下所示：



Documenttitle>
<style>
figcaption {
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size: 24px;
}
.player {
width: 720px;
height: 360px;
margin: 10px auto;
border: 1px solid #000;
background-color: #000;
position: relative;
border-radius: 6px;
}
.player video {
width: 720px;
height: 360px;
}
.controls {
width: 700px;
height: 40px;
background-color: rgba(255,255,0,0.3);
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 10px;
}
.switch {
position: absolute;
width: 22px;
height: 22px;
background-color: red;
left: 10px;
top: 9px;
border-radius: 50%;
}
.progress {
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left: 40px;
top: 15px;
border-radius: 4px;
overflow: hidden;
}
.curr-progress {
width: 0%;
height: 100%;
background-color: #fff;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
position: absolute;
left: 510px;
top: 10px;
}
.extend {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
right: 10px;
top: 10px;
}
style>
head>
<body>
<figure>  
<figcaption>视频案例figcaption>
<div class="player">
<video src="11.mp4">video>
<div class="controls">
<a href="#" class="switch">a>
<div class="progress">
<div class="curr-progress">div>
div>
<div class="time">
<span class="curr-time">00:00:00span>/
<span class="total-time">00:00:00span>
div>
<a href="#" class="extend">a>
div>
div>
figure>
<script>
var video = document.querySelector('video');
var playBtn = document.querySelector('.switch');
var currProgress = document.querySelector('.curr-progress');
var currTime = document.querySelector('.curr-time');
var totalTime = document.querySelector('.total-time');
var extend = document.querySelector('.extend');
var tTime = 0;
playBtn.onclick = function() {
if(video.paused){  // 如果视频是暂停的
video.play();    //play()播放  load()重新加载  pause()暂停
}else{
video.pause();
}
}
//当视频能播放(已经通过网络加载完成)时
video.oncanplay = function() {
tTime = video.duration;  //获取视频总时长(单位秒)
var tTimeStr = getTimeStr(tTime);
totalTime.innerHTML = tTimeStr;
}
//当视频当前播放时间更新的时候
video.ontimeupdate = function() {
var cTime = video.currentTime;  //获取当前播放时间 
var cTimeStr = getTimeStr(cTime);
console.log(cTimeStr);
currTime.innerHTML = cTimeStr;
currProgress.style.width = cTime/tTime*100+"%";
}
extend.onclick = function() {
video.webkitRequestFullScreen();  //视频全屏
}
//将以秒为单位的时间变成“00:00:00”格式的字符串
function getTimeStr(time) {
var h = Math.floor(time/3600);
var m = Math.floor(time%3600/60);
var s = Math.floor(time%60);
h = h>=10?h:"0"+h;
m = m>=10?m:"0"+m;
s = s>=10?s:"0"+s;
return h+":"+m+":"+s;
}
script>
body>
html></pre><p>以上就是关于“JavaScript怎么实现控制视频”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。</p>            
            
            
            <br>

            网站标题：JavaScript怎么实现控制视频
            <br>

            URL链接：<a href="http://mswzjz.cn/article/gddseh.html">http://mswzjz.cn/article/gddseh.html</a>

        </div>

    </div>

    <div class="other">

        <h3>其他资讯</h3>

        <ul>

            <li>

                    <a href="/article/scdods.html">现有CDP-DC集群启用Auto-TLS</a>

                </li><li>

                    <a href="/article/scdoeo.html">新手小白门户网站搭建需要考虑的几个问题</a>

                </li><li>

                    <a href="/article/scohpj.html">怎么查看域名在哪里注册？域名能重新注册吗？</a>

                </li><li>

                    <a href="/article/scdood.html">打开ssl证书部署方法有哪些？什么是SSL？</a>

                </li><li>

                    <a href="/article/scdoed.html">做网站的公司你应该怎么去挑选</a>

                </li>
        </ul>

    </div>

</div>

<footer>

    <div class="message">

        <div class="mess container">

            <p>免费获取网站建设与品牌策划方案报价</p>

            <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span>

            <form action="">

                <input type="text" class="ipt1" placeholder="联系人">

                <input type="text" class="ipt2" placeholder="联系电话">

                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"></textarea>

                <a href="">提交需求</a>

            </form>

        </div>

    </div>

    <div class="footA">

        <div class="footAs container">

            <ul>

                <h3>联系我们</h3>

                <b>028-86922220</b>

                <li>手机：13518219792</li>

                <li>地址：成都市太升南路288号锦天国际A幢1002号</li>

                <li class="hr1"></li>

                <li>24小时服务热线：400-028-6601</li>

            </ul>

            <ul>

                <h3>网站建设服务</h3>

                <li>网页设计</li>

                <li>网站制作</li>

                <li>网站开发</li>

            </ul>

            <ul>

                <h3>网站推广服务</h3>

                <li>营销网站建设</li>

                <li>百度快速排名</li>

                <li>整站网站推广</li>

            </ul>

            <ul>

                <h3>网站运维服务</h3>

                <li>基础维护</li>

                <li>网站改版</li>

                <li>网站维护</li>

            </ul>

            <ul>

                <h3>FOLLOW US</h3>

                <li class="hr2"></li>

                <li>

                    <dd class="fl"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>

                    <dd class="fr"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>

                </li>

            </ul>

        </div>

        <div class="link container">

            友情链接：

            <a href="http://www.hkccoic.com/" title="四川國際商會" target="_blank">四川國際商會</a>   <a href="https://www.cdcxhl.com/sosuo.html" title="网站搜索引擎优化" target="_blank">网站搜索引擎优化</a>   <a href="https://www.cdxwcx.com/wangzhan/applet.html" title="成都小程序开发" target="_blank">成都小程序开发</a>   <a href="https://www.cdxwcx.com/" title="成都网络营销" target="_blank">成都网络营销</a>   <a href="http://www.scmwjz.com/" title="网站建设开发" target="_blank">网站建设开发</a>   <a href="http://www.scdzj.cn/" title="护栏打桩机" target="_blank">护栏打桩机</a>   <a href="http://www.dzwzjz.com/" title="达州网站制作" target="_blank">达州网站制作</a>   <a href="https://www.cdxwcx.com/city/neijiang/" title="内江做网站" target="_blank">内江做网站</a>   <a href="https://www.cdcxhl.com/mianfei/jianshe/chengdu.html" title="成都免费网站建设公司" target="_blank">成都免费网站建设公司</a>   <a href="http://www.cdxwcx.cn/tuoguan/zigong.html" title="自贡服务器托管" target="_blank">自贡服务器托管</a>   
        </div>

    </div>

    <div class="footB">

        <div class="container">

            <div class="fl">

                四川攀枝花网站建设公司     四川攀枝花网站建设公司-选我们！四川专业的攀枝花网站制作公司！

            </div>

            <div class="fr">

                All Rights Reserved 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024097831号-1</a>

            </div>

        </div>

    </div>

</footer>

</body>

</html>

<script>

    $(".con img").each(function(){

        var src = $(this).attr("src");    //获取图片地址

        var str=new RegExp("http");

        var result=str.test(src);

        if(result==false){

            var url = "https://www.cdcxhl.com"+src;    //绝对路径

            $(this).attr("src",url);

        }

    });

    window.onload=function(){

        document.oncontextmenu=function(){

            return false;

        }

    }

</script>
网站建设知识

JavaScript怎么实现控制视频
