這篇“JavaScript怎么實(shí)現(xiàn)控制視頻”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript怎么實(shí)現(xiàn)控制視頻”文章吧。
成都創(chuàng)新互聯(lián)公司自2013年起，先為湟中等服務(wù)建站，湟中等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為湟中企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
具體代碼如下所示：
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();
}
}
//當(dāng)視頻能播放(已經(jīng)通過網(wǎng)絡(luò)加載完成)時
video.oncanplay = function() {
tTime = video.duration; //獲取視頻總時長(單位秒)
var tTimeStr = getTimeStr(tTime);
totalTime.innerHTML = tTimeStr;
}
//當(dāng)視頻當(dāng)前播放時間更新的時候
video.ontimeupdate = function() {
var cTime = video.currentTime; //獲取當(dāng)前播放時間
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>以上就是關(guān)于“JavaScript怎么實(shí)現(xiàn)控制視頻”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。</p>
<br>
文章名稱：JavaScript怎么實(shí)現(xiàn)控制視頻 <br>
文章分享：<a href="http://weahome.cn/article/gddseh.html">http://weahome.cn/article/gddseh.html</a>
</div>
</div>
</div>
<div id="squ6kqw" class="other container">
<h3>其他資訊</h3>
<ul>
<li>
<a href="/article/pdpssg.html">mysql模式匹配的意思是什么</a>
</li><li>
<a href="/article/pdpsso.html">調(diào)用動畫animation-name屬性如何使用</a>
</li><li>
<a href="/article/pdpsch.html">CheckCRS啟動問題的步驟是什么</a>
</li><li>
<a href="/article/pdpscg.html">如何進(jìn)行Flex4打印功能的實(shí)現(xiàn)</a>
</li><li>
<a href="/article/pdpche.html">歷代JDK新特性是什么</a>
</li> </ul>
</div>
<div id="squ6kqw" class="footer">
<div id="squ6kqw" class="foota container">
<div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12">
<ul>
<li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<h3>網(wǎng)站制作</h3>
<a target="_blank">手機(jī)網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作公司</a><a target="_blank">H5網(wǎng)站制作</a><a target="_blank">手機(jī)網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作價格</a> </li>
<li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<h3>企業(yè)服務(wù)</h3>
<a target="_blank">ssl證書</a><a target="_blank">網(wǎng)站備案</a><a target="_blank">注冊公司</a><a target="_blank">友情鏈接購買</a><a target="_blank">互聯(lián)網(wǎng)藥品信息服務(wù)資格證</a><a target="_blank">400電話</a> </li>
<li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<h3>網(wǎng)站建設(shè)</h3>
<a target="_blank">內(nèi)江網(wǎng)站建設(shè)</a><a target="_blank">網(wǎng)站建設(shè)公司</a><a target="_blank">安防網(wǎng)站建設(shè)方案</a><a target="_blank">醫(yī)藥醫(yī)療網(wǎng)站建設(shè)方案</a><a target="_blank">成都定制網(wǎng)站建設(shè)</a><a target="_blank">金融行業(yè)網(wǎng)站建設(shè)方案</a> </li>
<li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<h3>服務(wù)器托管</h3>
<a target="_blank">服務(wù)器機(jī)柜租用</a><a target="_blank">溫江服務(wù)器托管</a><a target="_blank">綿陽機(jī)房托管</a><a target="_blank">義龍電信機(jī)房</a><a target="_blank">重慶電信水土機(jī)房托管</a><a target="_blank">貴安電信機(jī)房</a> </li>
</ul>
</div>
<div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12">
<p>全國免費(fèi)咨詢:</p>
<b>400-028-6601</b>
<p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p>
<p>節(jié)假值班：18980820575 / 13518219792</p>
<p>聯(lián)系地址：成都市太升南路288號錦天國際A幢1002號</p>
</div>
</div>
<div id="squ6kqw" class="footb">
<div id="squ6kqw" class="copy container">
<div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號</a></div>
<!--<div id="squ6kqw" class="fr"><a target="_blank">成都網(wǎng)站建設(shè)</a>：<a target="_blank">創(chuàng)新互聯(lián)</a></div>-->
</div>
</div>
<div id="squ6kqw" class="link">
<div id="squ6kqw" class="container">
友情鏈接:：
<a target="_blank">成都網(wǎng)站建設(shè)</a>
<a target="_blank">重慶網(wǎng)站建設(shè)</a>
<a href="">四川網(wǎng)站建設(shè)</a>
<a href="">重慶建設(shè)網(wǎng)站</a>
<a target="_blank">移動服務(wù)器托管</a>
<a target="_blank">成都服務(wù)器托管</a>
<a target="_blank">云服務(wù)器</a>
<a target="_blank">廣告設(shè)計(jì)制作</a>
<a target="_blank">重慶網(wǎng)頁設(shè)計(jì)</a>
<a target="_blank">重慶做網(wǎng)站</a>
<a target="_blank">重慶網(wǎng)站制作</a>
<a href="">重慶網(wǎng)站建設(shè)</a>
<a href="">重慶網(wǎng)站公司</a>
<a href="">渝中網(wǎng)站制作</a>
<a href="">重慶網(wǎng)站設(shè)計(jì)</a>
</div>
</div>
</div>
<div id="squ6kqw" class="foot">
<ul class="public-celan">
<li>
<a target="_blank" class="a1 db tc">
<img src="/Public/Home/img/icon-23.png" alt="" class="db auto">
<span id="squ6kqw" class="span-txt">在線咨詢</span>
</a>
</li>
<li>
<a href="tel:18980820575" class="a1 db tc">
<img src="/Public/Home/img/icon-24.png" alt="" class="db auto">
<span id="squ6kqw" class="span-txt">電話咨詢</span>
</a>
</li>
<li>
<a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc">
<img src="/Public/Home/img/icon-25.png" alt="" class="db auto">
<span id="squ6kqw" class="span-txt">QQ咨詢</span>
</a>
</li>
<li>
<a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up">
<img src="/Public/Home/img/icon-26.png" alt="" class="db auto">
<span id="squ6kqw" class="span-txt">預(yù)約顧問</span>
</a>
</li>
</ul>
</div>
<div id="squ6kqw" class="customer">
<dl class="icon1">
<dt>
<a href="tencent://message/?uin=1683211881&Site=&Menu=yes">
<i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i>
<p>在線咨詢</p>
</a>
</dt>
</dl>
<dl class="icon2">
<dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨詢</p></dt>
<dd><img src="/Public/Home/img/ewm.png"></dd>
</dl>
<dl class="icon3">
<dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>電話咨詢</p></dt>
<dd>
<p>028-86922220（工作日）</p>
<p>18980820575（7×24）</p>
</dd>
</dl>
<dl class="icon4">
<dt class="sShow">
<a href="tencent://message/?uin=244261566&Site=&Menu=yes">
<i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p>
</a>
</dt>
</dl>
<dl class="icon5">
<dt class="gotop">
<a href="#top">
<i><img src="/Public/Home/img/top.png" alt=""></i><p>返回頂部</p>
</a>
</dt>
</dl>
</div>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="vfjjs" class="pl_css_ganrao" style="display: none;"><tr id="vfjjs"><abbr id="vfjjs"><li id="vfjjs"><abbr id="vfjjs"></abbr></li></abbr></tr><source id="vfjjs"></source><tfoot id="vfjjs"></tfoot><nobr id="vfjjs"><optgroup id="vfjjs"><tbody id="vfjjs"><label id="vfjjs"></label></tbody></optgroup></nobr><sup id="vfjjs"><acronym id="vfjjs"><video id="vfjjs"></video></acronym></sup><label id="vfjjs"><strike id="vfjjs"></strike></label><center id="vfjjs"></center><nobr id="vfjjs"></nobr><optgroup id="vfjjs"><label id="vfjjs"></label></optgroup><pre id="vfjjs"><form id="vfjjs"><address id="vfjjs"><sup id="vfjjs"></sup></address></form></pre><bdo id="vfjjs"><rt id="vfjjs"><wbr id="vfjjs"></wbr></rt></bdo><tfoot id="vfjjs"></tfoot><ol id="vfjjs"><tfoot id="vfjjs"><source id="vfjjs"></source></tfoot></ol><var id="vfjjs"></var><form id="vfjjs"><dl id="vfjjs"><sub id="vfjjs"></sub></dl></form><strong id="vfjjs"></strong><dfn id="vfjjs"><var id="vfjjs"><optgroup id="vfjjs"></optgroup></var></dfn><tr id="vfjjs"><b id="vfjjs"><nobr id="vfjjs"></nobr></b></tr><track id="vfjjs"></track><b id="vfjjs"></b><tbody id="vfjjs"></tbody><option id="vfjjs"><nobr id="vfjjs"><strong id="vfjjs"></strong></nobr></option><center id="vfjjs"></center><delect id="vfjjs"></delect><strike id="vfjjs"></strike><pre id="vfjjs"></pre><tbody id="vfjjs"></tbody><xmp id="vfjjs"></xmp><rt id="vfjjs"></rt><sup id="vfjjs"><ruby id="vfjjs"><rp id="vfjjs"><pre id="vfjjs"></pre></rp></ruby></sup><small id="vfjjs"><listing id="vfjjs"><abbr id="vfjjs"><noscript id="vfjjs"></noscript></abbr></listing></small><form id="vfjjs"></form><noframes id="vfjjs"></noframes><pre id="vfjjs"></pre><li id="vfjjs"></li><video id="vfjjs"><noframes id="vfjjs"><bdo id="vfjjs"><strike id="vfjjs"></strike></bdo></noframes></video><tbody id="vfjjs"><dfn id="vfjjs"><sub id="vfjjs"><big id="vfjjs"></big></sub></dfn></tbody><p id="vfjjs"><center id="vfjjs"></center></p><strike id="vfjjs"><dd id="vfjjs"><font id="vfjjs"><em id="vfjjs"></em></font></dd></strike><label id="vfjjs"></label><dd id="vfjjs"></dd><s id="vfjjs"><span id="vfjjs"><mark id="vfjjs"></mark></span></s><bdo id="vfjjs"></bdo><acronym id="vfjjs"></acronym><legend id="vfjjs"></legend><option id="vfjjs"></option><samp id="vfjjs"><delect id="vfjjs"><noframes id="vfjjs"><u id="vfjjs"></u></noframes></delect></samp><form id="vfjjs"></form><span id="vfjjs"><pre id="vfjjs"></pre></span><option id="vfjjs"><listing id="vfjjs"></listing></option><optgroup id="vfjjs"></optgroup><tr id="vfjjs"><optgroup id="vfjjs"><small id="vfjjs"><input id="vfjjs"></input></small></optgroup></tr><tbody id="vfjjs"><tr id="vfjjs"></tr></tbody><nav id="vfjjs"><noscript id="vfjjs"><code id="vfjjs"><s id="vfjjs"></s></code></noscript></nav><div id="vfjjs"><blockquote id="vfjjs"><progress id="vfjjs"><pre id="vfjjs"></pre></progress></blockquote></div><address id="vfjjs"><em id="vfjjs"><tt id="vfjjs"><b id="vfjjs"></b></tt></em></address><listing id="vfjjs"><dfn id="vfjjs"><var id="vfjjs"><input id="vfjjs"></input></var></dfn></listing><dl id="vfjjs"><strike id="vfjjs"><blockquote id="vfjjs"></blockquote></strike></dl><table id="vfjjs"><optgroup id="vfjjs"><sup id="vfjjs"></sup></optgroup></table><small id="vfjjs"></small><progress id="vfjjs"><meter id="vfjjs"></meter></progress><dl id="vfjjs"></dl><tr id="vfjjs"></tr><menuitem id="vfjjs"><kbd id="vfjjs"><table id="vfjjs"><strong id="vfjjs"></strong></table></kbd></menuitem><del id="vfjjs"></del><dl id="vfjjs"><strike id="vfjjs"><big id="vfjjs"></big></strike></dl><pre id="vfjjs"><rp id="vfjjs"><tbody id="vfjjs"></tbody></rp></pre><abbr id="vfjjs"></abbr><tr id="vfjjs"></tr><track id="vfjjs"><bdo id="vfjjs"></bdo></track><dfn id="vfjjs"></dfn><i id="vfjjs"><thead id="vfjjs"><td id="vfjjs"></td></thead></i><small id="vfjjs"><abbr id="vfjjs"></abbr></small><tfoot id="vfjjs"></tfoot><style id="vfjjs"></style><button id="vfjjs"></button><strike id="vfjjs"><center id="vfjjs"><font id="vfjjs"><blockquote id="vfjjs"></blockquote></font></center></strike><abbr id="vfjjs"></abbr><dfn id="vfjjs"><mark id="vfjjs"><output id="vfjjs"><ruby id="vfjjs"></ruby></output></mark></dfn><sup id="vfjjs"></sup><video id="vfjjs"></video><pre id="vfjjs"></pre><dd id="vfjjs"><em id="vfjjs"></em></dd><code id="vfjjs"><legend id="vfjjs"><var id="vfjjs"></var></legend></code><input id="vfjjs"></input><noscript id="vfjjs"></noscript><del id="vfjjs"><kbd id="vfjjs"></kbd></del><legend id="vfjjs"></legend><th id="vfjjs"></th><abbr id="vfjjs"><code id="vfjjs"></code></abbr><listing id="vfjjs"></listing><dd id="vfjjs"><font id="vfjjs"><button id="vfjjs"><noscript id="vfjjs"></noscript></button></font></dd><rp id="vfjjs"><option id="vfjjs"></option></rp><p id="vfjjs"><span id="vfjjs"><input id="vfjjs"></input></span></p><del id="vfjjs"></del><center id="vfjjs"></center><ol id="vfjjs"></ol><label id="vfjjs"><small id="vfjjs"></small></label><code id="vfjjs"></code><address id="vfjjs"></address></div>
</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>
重慶分公司
重慶分公司