自己动手做一款HTML5视频播放器

自己动手做一款HTML5视频播放器

        第一步:获取播放器
        第二步:实现播放与暂停
        第三步:实现全屏操作
        第四步:实现播放的逻辑
        第五步:实现播放过程的逻辑
        第六步:实现视频的跳播
        第七步:播放完毕后重置播放器的状态


在html5中播放 视频 和 音频 有单独的语义标签

//播放视频
 
//播放音频

其中 controls 属性可以控制播放
但是遗憾的是在每个浏览器中的显示效果却并不相同
我们可以自定义视频播放器使视频播放器在所有浏览器都有相同样式
html5中提供了很多多媒体接口
常用方法:

load() 加载

play() 播放

pause() 暂停

常用属性:

currentTime 视频播放的当前进度

duration 视频的总时间 100000/60 (以秒为单位 ,同时带有小数点)

paused 视频播放的状态

常用事件:

oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。

ontimeupdate: 通过该事件来报告当前的播放进度.

onended: 播放完时触发—重置

有了HTML5提供的多媒体接口,我们可以开始自定义播放器了
我使用了jquery来创建,因为操纵元素比较方便,但是由于JQuery中没有提供视频音频的控件,所以要将jq元素转化为原生的js—DOM元素

结构:




    
    Title
    
    


视频播放器

00:00:00 \ 00:00:00

 

第一步:获取播放器

将jq对象转化为DOM对象



                    
                    

你可能感兴趣的:(视频技术,视频行业)