关于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",()=>{//要先获取播放时间和总时长，并取整//然后再将播放时长和总时长给到相应对象的内容下spanlet 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

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

vue3-video-play视频组件的使用（一）——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
html5代码转换为视频,HTML5中的视频代码详解
摘要腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
HTML5学习之二：HTML5中的表单2
(本内容部分节选自<HTML 5从入门到精通>) 对表单的验证 -------------------------------------------------------- •1.re ...
html5 minlength,HTML5中是否有minlength验证属性？
回答(16) 3 years ago 如果想做出这种行为, 总是 show a small prefix on input field 或 the user can't erase a prefix ...
谈谈HTML5中的history.pushSate方法，弥补ajax导致浏览器前进后退无效的问题
移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...
HTML5中关于wheel事件兼容性处理
2019独角兽企业重金招聘Python工程师标准>>> 在html5中存在,滚轮滚动事件判断需要使用 wheel的时间,但各大版本浏览器使用的方式差异性却非常大,总体来说,目前whe ...
html5自动完成是什么,HTML5中form如何关闭自动完成功能的方法
什么是HTML5的form自动完成功能? 首先,HTML5 中有个新属性autocomplete ,autocomplete 属性规定表单是否应该启用自动完成功能,它自动完成允许浏览器预测对字段的输入 ...
html怎么把图片放到数组,HTML5中的图像数组
所以,如果我想在网上抓取几张图片,将它们放入一个数组中并在网站上使用它们,我正在使用Javascript怎么做.HTML5中的图像数组 var images = [ {caption: "R ...
php处理html5文件上传代码,HTML5中文件上传的代码
这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助.XHR2上传二进制文件 html代码: javascript代码:functi ...

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

Uncaught SyntaxError: Identifier ‘value’ has already been declared

Cannot set property ‘innerHTML’ of null

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

最新文章

热门文章