重写HTML5 video播放器

最新推荐文章于 2024-08-14 09:02:55 发布

ICY___

最新推荐文章于 2024-08-14 09:02:55 发布

阅读量1.2k

点赞数

文章标签： H5video

本文链接：https://blog.csdn.net/ICY___/article/details/87889594

版权

本文介绍了作者在重写H5 video播放器过程中的经验，探讨了谷歌和火狐浏览器对本地及远程视频播放的不同表现，提到了一些不常见的video属性，并展示了部分实现代码，尽管仍存在小问题，但作为学习案例，为打造功能更完善的播放器提供了基础。

摘要由CSDN通过智能技术生成

自从H5进宫以来，flash一直被冷落以至于要停止维护。可见，H5还是有很大的优势的，在播放器上，H5自带的播放器已经很强大了，今天将要重写H5播放器（虽然好丑）

放在前面的总结：谷歌浏览器表现的差强人意，本地视频上无法实现进度条的操作，火狐可以，至少我没有找到解决办法，远程视频没有问题，有好多video属性之前听都没听说过，只能神农尝百草，还是比较头疼的，代码不算很多，毕竟是经常在用的东西，所以思想也不是很复杂，但小bug不断。

实现效果：

代码如下，注释已写：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>video</title>
    <style>
        #video{
            width: 700px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid red;
        }
        #mp4player{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: black;
            float: left;
            overflow: hidden;
        }
        #mp4{
            position: relative;