Welcome, this is Chunar!
  • Oct 15, 2020

在网页中播放视频

 

使用nginx或JW Player外部挂载的方式实现视频流服务

使用nginx或JW Player外部挂载的方式实现视频流服务

如果在Django项目中直接添加链接指向视频文件是不能够播放的，原因是播放视频文件需要视频流

以下介绍两种方法来实现视频流

1.通过nginx播放本地视频

修改/etc/nginx/nginx.conf，添加以下内容

http {
    #***** 视频流配置内容 *****
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/css application/xml;
    gzip_vary on;

    output_buffers 1 32k;
    postpone_output 1460;
    client_header_timeout 3m;
    client_body_timeout 3m;
    send_timeout 3m;

    open_file_cache max=64 inactive=30d;
    open_file_cache_min_uses 1;
    open_file_cache_valid 3m;
    #***** 视频流配置内容 *****

    server {
        listen 12345;
        server _;
        ...
        # 添加mp4文件的路由
        location ~ /.mp4$ {
            root   /usr/share/nginx/html; # 这里使用了CentOS中nginx默认的根地址
        }
        ...
    }
}

此时将视频文件（mp4，其他格式的话修改上面location的内容）放入/usr/share/nginx/html中，在浏览器输入地址http://ip:12345/your.mp4就可以观看视频

不过nginx的播放器性能一般，下面介绍一种更优化的方式

2.使用JWPlayer嵌入视频

JW Player提供视频托管服务。可以通过在前端页面引用JW Player的配置来实现视频流；或将视频上传到JW Player的服务器，它会生成视频链接，直接嵌入到页面中就能够实现视频流，目前JW Player提供免费版

以Django页面为例，介绍两种通过JW Player嵌入视频的方式

1.播放本地视频

注册JW Player账号后，会拥有一个自己的Cloud Player Library Url，可以在这里看到

将这个Url添加到html文件的head中，像这样：

<script type="text/javascript" src="https://cdn.jwplayer.com/libraries/xxxxxx.js"></script>

再根据官方示例，将下面的代码添加到body中

<div id="myElement"></div>

<script type="text/JavaScript">
    jwplayer("myElement").setup({ 
        "playlist": [{
            "file": "/static/your.mp4"  // 指定视频文件位置
        }]
    });
</script>

像上面的方法是将视频文件当作静态文件来加载，这样可以实现播放功能，但每次都会将视频完整地加载出来，非常不优雅

另一种方法是将本地视频也指定一个Url，比如第一节中在nginx里面配置的的http://ip:12345/your.mp4

<div id="myElement"></div>

<script type="text/JavaScript">
    jwplayer("myElement").setup({ 
        "playlist": [{
            "file": "http://ip:12345/your.mp4"  // 指定视频的url
        }]
    });
</script>

这样就可以实现流式加载

2.将视频上传到JW Player

在JW Player的Dashboard中可以将视频上传。完成后点击EMBED就会生成类似下面的嵌入html的代码，将其复制到自己的页面中就可以播放视频（注意这种方法不需要在head中引用jwplayer的js）

<div itemscope itemtype="https://schema.org/VideoObject">
    <meta itemprop="uploadDate" content="Thu Oct 15 2020 11:21:56 GMT+0800 (China Standard Time)"/>
    <meta itemprop="name" content="video"/>
    <meta itemprop="duration" content="PT3M1.697S" />
    <meta itemprop="thumbnailUrl" content="https://content.jwplatform.com/thumbs/your_own.jpg"/>
    <meta itemprop="contentUrl" content="https://content.jwplatform.com/videos/your_own.mp4"/>
    <script src="https://cdn.jwplayer.com/players/your_own.js"></script>
</div>
Search