用Ｈ5和原生JS制作一款简单的视频播放器

属性与方法介绍

video标签：有src属性，里面填资源地址，如果加上controls属性【因为属性内容和属性一样，可以只写controls，如：<video src="./IMG_4068.mp4" class="myVideo" controls></video>】，会出现默认自带的控制界面，一般都是不填这个，自己来写一个好看的控制台，

        用JS获取到video元素后，调用play()方法就播放了；

        video.paused：是否处于暂停状态，true是暂停着，反之为播放；

        video.pause()：是暂停视频;

        video.duration：是视频的总时间，是秒，而且小数很多；

        video.currentTime：是当前时间，是秒，而且小数很多；

        video.playbackRate = 2;就是2倍速播放；

        video.volume = 1;就是音量设置，范围0-1；

        全屏：先获取到document.documentElement，再用它调用requestFullscreen()方法，就可以把浏览器置于全屏，然后用window.screen.height把元素宽高都赋上就行了；

注意：如果出现视频不能通过设置video.currentTime来跳转进度，那么说明自带的编辑器中服务器不支持，可以通过network下的Response Headers下面是否有有Content-Range属性，有了才能设置时间进行跳转，HTTP协议支持和服务器下支持；

示例图片

源码非常简单，就是各种事件与h5自带的方法去一点点实现。

存疑

如何使用video标签实现获取实时的RTSP码流？

之前想的是在后台增加转码功能，把码流封装为视频，但是对实时看相机视频来说延迟太高，H5stream好像也是收费的，不知道大家没有其他好办法。