Nginx+ffmpeg 搭建流媒体服务器（四）：H5直播演练

最新推荐文章于 2021-10-27 15:28:35 发布

Marhal

最新推荐文章于 2021-10-27 15:28:35 发布

阅读量3k

点赞数

分类专栏： Nginx+ffmpeg流媒体服务器文章标签： H5直播

本文链接：https://blog.csdn.net/qq_38157006/article/details/106544706

版权

Nginx+ffmpeg流媒体服务器专栏收录该内容

4 篇文章 1 订阅

订阅专栏

H5直播演练

播放器选型

播放器选型

video.js

链接: GitHub
https://unpkg.com/video.js/dist/video-js.min.css
https://unpkg.com/video.js/dist/video.min.js

自定义ui
多插件
体积大
功能齐全
符合线上场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
</head>
<body>
<video id="my-player" class="video-js" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" data-setup='{}'>
    <source src="https://gcalic.v.myalicdn.com/gc/gccntv240-lzb01_1/index.m3u8?contentid=2820180516001" type="application/x-mpegURL">
</video>
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script type="text/javascript">
    // var player = videojs('my-player');
    var options = {
        width:400,
        height:200
    };

    var player = videojs('my-player', options, function onPlayerReady() {
        videojs.log('Your player is ready!');

        // In this context, `this` is the player that was created by Video.js.
        // this.play();

        // How about an event listener?
        this.on('ended', function() {
            videojs.log('Awww...over so soon?!');
        });
    });
</script>
</body>
</html>

hls.js

体积小易扩展
适合hls类型的直播、点播
链接: GitHub
https://cdn.jsdelivr.net/npm/hls.js@latest

下面demo样式有点问题，就不注重了，主要是能让视频播放出来。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .player{
            width: 200px;
            height: 100px;
            position: relative;
        }
        .player video{
            width: 100%;
            height: 100%;
        }
        .player .btn{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -35px auto auto -35px;
            padding: 15px;
            background-color: rgba(255,255,255,0.5);
            line-height: 40px;
            display: none;
        }
        .player .btn:hover{
            background: rgba(255,255,255,0.7);
        }
        .player .btn:before{
            border: 20px solid #ddd;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-right-color: transparent;
            content: ' ';
            display: block;
            margin-left: 10px;
            width: 0;
            height: 0;
        }
        .player .btn:before:hover{
            border-left-color: #fff;
        }
        .player.pause .btn{
            display: block;
        }
    </style>
</head>
<body>
<div class="player">
    <!--页面未加载完成时就播放音频chrome会报错 所以默认静音-->
    <video id="video" muted></video>
    <em class="btn"></em>
</div>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    var Hls = window.Hls;
    var video = document.getElementById('video');
    var btn = document.querySelector('.btn');
    var player = document.querySelector('.player');

    var videoSrc = 'http://live.local.com/stream.m3u8';
    if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
            // video.play();
        });
    }else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = videoSrc;
        video.addEventListener('loadedmetadata', function() {
            // video.play();
        });
    }
    // 自定义播放暂停按钮
    btn.addEventListener('click',function () {
        if(video.paused){
            console.log(111)
            video.play()
        }else{
            console.log(222)
            video.pause()
        }
    })
    btn.addEventListener('play',function () {
        player.className = 'palyer';
    })

    btn.addEventListener('pause',function () {
        player.className = 'palyer pause';
    })
    // 点击视频播放暂停
    video.addEventListener('click',function () {
        if(video.paused){
            video.play()
        }else{
            video.pause()
        }
    })
</script>
</body>
</html>

flv.js

B站开源
https://github.com/Bilibili/flv.js

Marhal

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Nginx+ffmpeg 搭建流媒体服务器（四）：H5直播演练

H5直播演练播放器选型video.jshls.jsflv.js播放器选型video.js链接: GitHubhttps://unpkg.com/video.js/dist/video-js.min.csshttps://unpkg.com/video.js/dist/video.min.js自定义ui多插件体积大功能齐全符合线上场景<!DOCTYPE html><html lang="en"><head> <meta charset
复制链接

扫一扫