canplay的问题
来源：3-10 load、canplay
慕前端8091531
2020-03-27 17:17:03
老师 在本地 我绑定canplay第一次打开网页是执行的 但是我刷新他就不执行了 这是为什么 怎么解决呢？
2回答
-
好帮手慕粉
2020-03-27
同学你好，老师使用谷歌浏览器进行测试同学的代码，是没问题的，每次刷新页面都会弹出1：
同学可以再测试下呢。
祝学习愉快~
0 -
慕前端8091531
提问者
2020-03-27
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义视频</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 最外层的元素 -->
<div class='outerNode'>
<!-- video元素 -->
<video class='videoNode' poster="images/poster.jpg">
<source src='./videos/imooc.webm'></source>
<source src='./videos/imooc.mp4'></source>
</video>
<!-- 控制器的元素 -->
<div class='controlsNode'>
<!-- 控制播放暂停的按钮 -->
<div class='playNode' id="playbtn"></div>
<!-- video的进度条 -->
<div class='loadNode'>
<div class='loadLeft'></div>
<div class='loadRight'></div>
<!-- 拖动进度条的按钮 -->
<div class='crlNode'></div>
<!-- 真正的进度条 -->
<div class='lineNode'>
<div class='lineRight'></div>
</div>
</div>
<!-- 时间的元素 -->
<div class='timeNode'>
<span class='now'>00:00</span>
<span> / </span>
<span class='all'>00:00</span>
</div>
<!-- 声音的标志 -->
<div class='volumeNode'></div>
<!-- 声音的条 -->
<div class='volumeLine'>
<div class='v_left'></div>
<div class='v_right'></div>
<div class='v_DragNode'></div>
</div>
<!-- 全屏的按钮 -->
<div class='fullNode'></div>
</div>
</div>
<script src='http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js'></script>
<script src='js/video.js' ></script>
</body>
</html>
CSS
*{margin: 0;padding: 0;list-style: none;}
.outerNode{width: 540px;height: 332px;position: absolute;left: 50%;top: 50%;margin: -166px 0 0 -270px;box-shadow: 0 0 4px #5b606d;}
.outerNode .videoNode{
width: 540px;height: 305px;float: left;
background: black;
}
.outerNode .controlsNode{
width: 540px;height: 27px;float: left;background: url(../images/ctrs_bg.gif) repeat-x;
}
.outerNode .controlsNode .playNode{
float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
background: url(../images/playNode.png) no-repeat;cursor: pointer;
}
.outerNode .controlsNode .pauseNode{
float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
background: url(../images/pause.png) no-repeat;cursor: pointer;
}
.outerNode .controlsNode .loadNode{width: 267px;height: 10px;margin: 9px 0 0 14px;float: left;background: url(../images/load_bg.png) repeat-x;position: relative;}
.outerNode .controlsNode .loadNode .lineNode{
width: 0%;height: 7px;position: absolute;left: 0;top: 1px;
background: url(../images/line_bg.png) repeat-x;
}
.outerNode .controlsNode .loadNode .lineNode .lineRight{
width: 2px;height: 100%;position: absolute;right: 0;top: 0;
background: url(../images/line_r_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .loadLeft{
height: 100%;width:3px ;position: absolute;left: 0;top: 0;
background: url(../images/left_bg.png) no-repeat;z-index: 4;
}
.outerNode .controlsNode .loadNode .loadRight{
height: 100%;width:3px ;position: absolute;right: 0;top: 0;
background: url(../images/right_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .crlNode{width: 17px;height: 17px;background: url(../images/crl_bg.png);position: absolute;left: -8.5px;top: -3.5px;cursor: pointer;z-index: 5;}
.outerNode .controlsNode .timeNode{
float: left;width: 75px;height: 10px;margin: 9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span{font-size:10px;float: left;line-height: 10px;color: white; }
.outerNode .controlsNode .volumeNode{
width: 17px;height: 16px;float: left;margin: 5px 0 0 6px;
background: url(../images/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
height: 8px;width: 61px;float: left;margin: 10px 0 0 4px;
background: url(../images/volumeLine_bg.png) repeat-x;position: relative;
}
.outerNode .controlsNode .volumeLine .v_left{
width: 3px;height:100%;position: absolute;left: 0;top: 0;background: url(../images/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
width: 3px;height:100%;position: absolute;right: 0;top: 0;background: url(../images/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode{width: 15px;height: 13px;position: absolute;left: 58.5px;top: -3.5px;background: url(../images/vo_d.png) no-repeat;cursor: pointer;}
.outerNode .controlsNode .fullNode{
width:15px;height:17px;float: left;margin: 6px 0 0 35px;
background: url(../images/full_bg.png) no-repeat;cursor: pointer;
transition: 0.7s;
}
.outerNode .controlsNode .fullNode:hover{
background: url(../images/full_hover_bg.png) no-repeat;
}
JS
$(function(){
var btnStatus = false;
//视屏播放/暂停方法
function ppfn(jqthis){
btnStatus = !btnStatus;
if(btnStatus == true){
//btnStatus = false;
$('#playbtn').attr('class','pauseNode');
$('.videoNode').trigger('play');
} else {
$('#playbtn').attr('class','playNode');
$('.videoNode').trigger('pause');
}
}
//视频全屏方法
function fullScreen(){
if($('.videoNode').get(0).webkitRequestFullScreen){
$('.videoNode').get(0).webkitRequestFullScreen();
} else if($('.videoNode').get(0).mozRequestFullScreen){
$('.videoNode').get(0).mozRequestFullScreen();
} else {
$('.videoNode').text('您的浏览器版本过低');
}
}
//视频进度条
//设置时间格式
function setTime(obj,method){
var s = parseInt(method%60);
var m = parseInt(method/60);
var h = parseInt(method/3600);
if (h == 0) {
return addZero(m) + ':' + addZero(s);
} else {
return addZero(h) + ':' + addZero(m) + ':' + addZero(s);
}
}
//补0
function addZero(Vtime){
return Vtime < 10 ? '0'+Vtime : Vtime;
}
//设置视频总时间
$('.videoNode').on('canplay',function(){
alert(1);
var videoDate = parseInt($(this).get(0).duration);
console.log(videoDate);
$('.all').text(setTime($('.videoNode'),videoDate));
})
//点击按钮控制视频
$('#playbtn').on('click',function(){
ppfn($(this));
})
//点击视频控制视频
$('.videoNode').on('click',function(){
ppfn($(this));
})
//点击全屏
$('.fullNode').on('click',function(){
fullScreen();
})
})
0
相似问题
回答 1