How to implement a simple html video player

不言
Release: 2018-05-08 16:22:24
Original
4227 people have browsed it

This article mainly introduces the method of implementing a simple html video player. It is very simple to create a video player with H5. You only need to add some H5 tags to create a cool player

This article Introduces the method of implementing a simple html video player and shares it with everyone. The details are as follows:

File list

root@tianshl:/data/video# ls
hch.mp4     test.mp4    xyx.mp4   index.html  video.list  jquery.js
Copy after login

index.html



    
        
        
    

视频列表

    Copy after login

    video.list

    # 该目录下的所有MP4文件, 供jQuery解析
    root@tianshl:/data/video# ls *.mp4 > video.list
    Copy after login

    nginx configuration

    user root;
    worker_processes  1;
    events {
        worker_connections  1024;
    }
    http {
        include       mime.types;
        sendfile        on;
        keepalive_timeout  65;
    
        server {
            listen       8000;
            server_name  本机IP;
            location / {
                # 前两行是认证(可不加)
                auth_basic "secret";
                auth_basic_user_file /usr/local/nginx/passwd.db;
                
                # 路径
                root /data/video;
                # 首页
                index index.html;
            }
        }
    }
    Copy after login

    Interface display

    http://localhost:8000

    Authentication

    Player

    Related recommendations:

    HTML5 video Introduction to using video tags


    The above is the detailed content of How to implement a simple html video player. For more information, please follow other related articles on the PHP Chinese website!

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!