MP4和FLV点播流媒体服务与h5播放器解决方案（支持倍速）

最新推荐文章于 2024-04-19 14:27:57 发布

K .

最新推荐文章于 2024-04-19 14:27:57 发布

阅读量1.6k

点赞数 1

分类专栏： ubuntu 开发环境问题解决文章标签： nginx html5 服务器 docker

本文链接：https://blog.csdn.net/czksnk/article/details/113615843

版权

开发环境问题解决同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

ubuntu

3 篇文章 0 订阅

订阅专栏

服务器采用nginx，默认支持MP4和FLV格式，要支持rtmp需要安装拓展包。h5播放器采用video.js+flv.js。

一、nginx服务器部署

1.安装nginx

本文采用的docker容器部署，直接安装在本机亦可。

docker run -it --name nginx -p 80:80 -v ~/share/logs:/var/log/nginx -v ~/share/videos:/videos nginx bash

-v 可按自己的需求映射目录

2.修改许可nginx 跨域

在容器内/etc/nginx/目录下修改nginx.conf文件，在http内加入三行。

http{
	...
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
	add_header Access-Control-Allow-Headers X-Requested-With;
	...
}

3.修改地址指向视频目录

在容器内/etc/nginx/conf.d目录下修改default.conf文件，在server内新加一条location，这里注意location地址意思为/videos/的根目录为/，/videos/会被映射到/videos/。

server {
   ...
   location /videos/ {
        root   /;
   }
   ...
}

4.重加载nginx配置文件

nginx -s reload

5.测试nginx流媒体服务可用

打开任意支持网络链接的视频浏览器，如VLC，打开链接http://<ip_host:port>/videos/test.flv测试，如果没有视频在/var/log/nginx下查看日志。

二、h5视频播放器

直接贴源码，在任意服务端上运行即可。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>video</title>
    <!-- Video.js -->
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
    <script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
    <script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
</head>
 
<body>
    <div>
        <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered"  width="1024" height="768"> </video>
    </div>
</body>
 
</html>
<script>
var flvUrl = "这里填地址";
 
var player = videojs('videojs-flvjs-player', {
    playbackRates: [0.5,1,1.5,2,3,5,10],
    techOrder: ['html5', 'flvjs'],
    flvjs: {
        mediaDataSource: {
            isLive: false,
            cors: true,
            withCredentials: false,
        },
    },
    sources: [{
        src: flvUrl,
        type: 'video/mp4'
    }],
    controls: true,
    preload: "none"
}, function onPlayerReady() {
    console.log('player ready')
 
    player.on('error', (err) => {
        console.log('first source load fail')
 
        player.src({
            src: flvUrl,
            type: 'video/x-flv'
        });
 
        player.ready(function() {
            console.log('player ready')
            player.load();
            player.play();
        });
    })
});
</script>

参考

结合video.js播放rtmp格式、flv格式、mp4等格式的视频

K .

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
MP4和FLV点播流媒体服务与h5播放器解决方案（支持倍速）

nginx 跨域docker run -d --name nginx -p 80:80 -v ~/opt/local/nginx/logs:/var/log/nginx -v ~/opt/local/nginx:/etc/nginx nginxhttp{ ... add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; add_header Access
复制链接

扫一扫