求video.js的详细用法及demo

Posted 2023-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求video.js的详细用法及demo相关的知识，希望对你有一定的参考价值。

参考技术A 我也在自学，这个是我自己写的，改一下文件试试？：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* margin: 0; padding: 0;
video::-webkit-media-controls-enclosure
/*禁用播放器控制栏的样式*/
display: none !important;

#wrapwidth:700px;position: relative; overflow: hidden;margin: 0 auto;
.box position: absolute; bottom: 10px;width:100%;text-align: center;
/*#play,#stop,#full,#secfull width: 7%;
#videotimerwidth: 20%*/
/*#timefloat: left;*/
</style>
</head>
<body>
<div class="full" id="wrap">
<section class="video">
<video width="700" height="" id="video" loop="" autoplay="">
<source src="b.mp4" ></source>
</video>
</section>

<section class="box">
<button id="play">开始</button>
<button id="stop">暂停</button>
<button id="full">全屏</button>
<button id="escfull">退出全屏</button>
<input type="range" id="videotimer" min="0" value="0" />

<span>00</span>:<span class="now">00</span> /
<time class="minute">00</time>:<time class="second">00</time>



</section>
</div>

<script src="../jquery-1.12.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var aplay=document.getElementById("play");
var astop=document.getElementById("stop");
var avideo=document.getElementById("video");
var full=document.getElementById("full");
var escfull=document.getElementById("escfull");
var wrap=document.getElementById("wrap");
var mute=document.getElementById("mute");

aplay.onclick=function()
avideo.play();

astop.onclick=function()
avideo.pause();

// mute.onclick=function()
// avideo.muted();
//

full.onclick=function()
if(wrap.webkitRequestFullScreen)
wrap.webkitRequestFullScreen();
$('.full').css("width",$(window).width()+"px");
$('.full').css("height",$(window).height()+"px");
avideo.style.width = $(window).width()+"px";
else if(wrap.mozRequestFullScreen)
wrap.mozRequestFullScreen();
else if(wrap.msRequestFullscreen)
wrap.msRequestFullscreen();

escfull.onclick=function()
if(document.webkitCancelFullScreen)
document.webkitCancelFullScreen();
wrap.style.width = 700+"px";
wrap.style.height = 'auto';
avideo.style.width = 700+'px';

avideo.onloadedmetadata=function()
var videoLong=Math.floor(avideo.duration);
var videonow=Math.floor(avideo.currentTime);
var min=Math.floor(videoLong/60);
var sec=Math.floor(videoLong%60);
$('.minute').html(min);
$('.second').html(sec);
$('#videotimer').attr("max",videoLong);
$('#videotimer').change(function()
avideo.currentTime=$(this).val();

);
avideo.ontimeupdate=function()
$('#videotimer').val(Math.floor(avideo.currentTime));
$('.now').html(Math.floor(avideo.currentTime));

</script>
</body>
</html>追问

有demo没，能不能发一份给我

本回答被提问者采纳