参考HTMLMediaElement是HTMLVideoElement和HTMLAudioElement的父类
所以 视频和音频可以继承媒体的属性方法和事件
以下是我遇到的几个问题和需要注意的点:
Uncaught SyntaxError: Identifier ‘value’ has already been declared
已经定义过得’value’不能重复声明
这是我的源代码
需要把let去掉即可
Cannot set property ‘innerHTML’ of null
要求js代码上下一致,按顺序写
检查出错的点在:或者事件loadeddata上
我的错在span的id出现错误
这个事件在媒体对象的第一帧加载完成后自动触发,自动监听
有两种写法:
HTMLMediaElement.onloadeddata = function(){
//...
}
HTMLMediaElement.addElement.addEventListener = function(){
//...
}
或者写箭头函数
HTMLMediaElement.addEventListener("loadeddata",()=>{
//要先获取播放时间和总时长,并取整
//然后再将播放时长和总时长给到相应对象的内容下span
let currentTime = parseInt(videoEle.currentTime);
let duration = parseInt(videoEle.duration);
document.getElementById("currentTime").innerText = currentTime;
document.getElementById("duration").innerText = duration;
});
loadedmetadata和loadeddata
前者是原数据 后者是加载完视频的第一帧
这个和代码顺序无关,服务器一定是先返回原数据后返回加载出的帧(图)
服务器先返回的是原数据比如宽高,播放时长
这样就可以,再图片出现之前对一些属性进行改变
Uncaught SyntaxError: Unexpected token '=>'
箭头函数省略function