关于HTML5中HTMLMediaElement遇到的一些问题(1)

参考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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值