我这里调用onloadedmetadata事件有问题。

采用老师上课的方式就没有反应

/*元数据被加载事件*/
   v.on("loadedmetadata",function(){
       console.log('onloadedmetadata');
   });

而使用这种方式就可以：

v.onloadedmetadata=console.log('onloadedmetadata');

想知道为什么，并且如何解决这个问题。

normcore 2017-12-14

源自：HTML5音视频 3-3 js实现鼠标移入移除效果

收起

2回答

怎么都被占用了呢回答被采纳获得+3积分 2017-12-14 19:01:23

你将所有的脚本写入$(function(){})中试试吧，

我在我本地测试的， window.onload下第一种方式也是不显示的。window.onload和$(function(){})它们俩等待页面加载的条件和时间不同，会对onloadedmetadata事件一些影响。

收起回答

normcore 提问者 #1

谢谢亲~我之前使用widow.onload方法主要是想着页面上有图片也有视频，需要等它们加载完后来执行JS代码比较，没想到它不支持onloadedmetadata这个事件。

2017-12-15 09:17:09

怎么都被占用了呢 2017-12-14 17:51:42

你将你的代码完整的放上来吧。

收起回答

提问者 normcore #1

HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myVideoPlayer</title> <link rel="stylesheet" href="css/video.css"> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/video.js"></script> </head> <body> <div class="vContainer" id="vContainer"> <video class="myVideo" id="myVideo" poster="img/belle.png"> <source src="img/imooc.mp4" type="video/mp4"> <source src="img/imooc.ogv" type="video/ogv"> <source src="img/imooc.webm" type="video/webm"> 您的浏览器不支持video标签 </video> <div class="caption" id="caption">My Own Video Player</div> <div class="control" id="control"> <div class="top"> <div class="progress"><span class="timeBar"></span></div> <div class="time"> <span class="currentTime">00:00</span> <span>/</span> <span class="duration">02:00</span> </div> </div> <div class="bottom"> <div class="button play" id="play"></div> <div class="button pause" id="pause"></div> <div class="button rate1" id="rate1">x1</div> <div class="button rate2" id="rate2">x2</div> <div class="button rate3" id="rate3">x3</div> <div class="volume" id="volume"> <span class="volumeBar"></span> </div> <div class="button sound" id="sound"></div> </div> </div> <div class="loading" id="loading"></div> </div> </body> </html>

2017-12-14 17:59:29
提问者 normcore #2

script代码：video.js window.onload=function(){ var v=$('#myVideo'),play=$('#play'),pause=$('#pause'), loading=$('#loading'),caption=$('#caption'), control=$('#control'),vContainer=$('#vContainer'), rate1=$('#rate1'),rate2=$('#rate2'),rate3=$('#rate3'); v.on("loadedmetadata", function() { console.log('onloadedmetadata'); }); // v.onloadedmetadata=showTitleAndControl(false); // v.onloadedmetadata=console.log('onloadedmetadata'); }

2017-12-14 17:59:51
提问者 normcore #3

代码不复杂那都是按照老师的顺序来写的，主要就是JS里面的问题。/*元数据被加载事件*/ v.on("loadedmetadata",function(){ console.log('onloadedmetadata'); }); 而使用这种方式就可以： v.onloadedmetadata=console.log('onloadedmetadata');

2017-12-14 18:00:37