构建直播网站播放（并解决不同系统之间的问题）

最新推荐文章于 2024-05-21 22:36:40 发布

chvfily

最新推荐文章于 2024-05-21 22:36:40 发布

阅读量307

点赞数

分类专栏：音视频开发文章标签： html

本文链接：https://blog.csdn.net/sundy_ywz/article/details/112861860

版权

音视频开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

摘要：由于搭建了一个推流视频直播平台，之前一直都是利用obs或ffmpeg进行推流，以srs作为视频流接收和转发服务器，利用ffmpeg->ffpaley作为拉流器播放视频，但是作为播放端应该尽量简单操作，基于此，写了一个网页以便在web浏览器观看直播端。

网页的功能是要是：

1.设置一个video标签

2.设置视频流地址

3.根据系统的不同，使用不同的视频格式，苹果系统的主要使用hls流，其他系统主要使用flv视频流，如果系统判定为苹果系统，则转跳到hls-index.html页面。

live-index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>live</title>
        <style>
            .mainContainer {
                display: block;
                width: 640px;
            }
     
            .urlInput {
                display: block;
                width: 100%;
                margin-top: 8px;
                margin-bottom: 8px;
            }
     
            .centeredVideo {
                display: block;
                width: 100%;
                height: 320px;
            }
     
            .controls {
                display: block;
                width: 100%;
                text-align: left;
            }
            .goto{
                height: 50px;

            }
        </style>
    </head>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
 
<body>
    <!-- <div class="card text-center border-0">
        <div class="card-body">
            <video id="videoElement" controls autoplay  >Your browser is too
                old which doesn't support HTML5 video.</video>
        </div>
    </div> -->
    <!-- <br> -->
    <!-- <div class="controls">
        <button onclick="flv_start()">开始</button>
        <button onclick="flv_pause()">暂停</button>
        <button onclick="flv_destroy()">停止</button>
        <input style="width:100px" type="text" name="seekpoint" />
        <button onclick="flv_seekto()">跳转</button>
    </div> -->
    <!-- <div class="goto">
        <p>
            <a href="./hls-index.html">苹果系统请点击</a>
        </p>
    </div> -->
    
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
    <script>
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        if ((navigator.userAgent.match(/(iPhone|iPod|ios|iPad)/i))) {
                window.location.href="./hls-index.html"  //手持端(WAP)网站
            }

        var player = document.getElementById('videoElement');

        if (flvjs.isSupported()) {

        //     if (isiOS) {   //如果是ios系统
        //         // 
        //         // window.location.href="./hls-index.html"

        //         // alert("非法访问！");

        //     //    hls_html = '<video id=\'my-video\' class=\'video-js\' controls preload=\'auto\' width=\'640\' height=\' 320\' '
        //     //                 + ' data-setup=\'{ "html5" : { "nativeTextTracks" : true } }\'>'
        //     //                 + ' <source src=\'http://127.0.0.*:8080/live/dk.m3u8\' type="application/x-mpegURL"> '
        //     //                 + ' <p class=\'vjs-no-js\'>'
        //     //                 + ' To view this video please enable JavaScript, and consider upgrading to a web browser that'
        //     //                 + ' <a href=\'https://videojs.com/html5-video-support/\' target=\'_blank\'>supports HTML5 video</a>'
        //     //                 + ' </p>'
        //     //                 + ' </video>';
                
        //     //     document.body.innerHTML  = hls_html;
        //     //     var player = videojs('my-video');
        //     //     player.play();
        //     }
        //     else  // 否则
        //     {
        //         
        //     }

            var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        enableWorker:true,
                        enableStashBuffer:false,
                        stashInitialSize:128,
                        url: 'http://127.0.0.*:8080/live/dk.flv',
                    });

            html = '<div class="card text-center border-0">'
                        + '<div class="card-body"> '
                        + '<video id="videoElement" controls autoplay width="640" height="320" >Your browser is too '
                        + 'old which no support HTML5 video.</video>'
                        + '</div>'
                        + '</div>'
            
            document.body.innerHTML  = html;

            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flv_start();

            function flv_start() {
                player.play();
            }

            function flv_pause() {
                player.pause();
            }

            function flv_destroy() {
                player.pause();
                player.unload();
                player.detachMediaElement();
                player.destroy();
                player = null;
            }

            function flv_seekto() {
                player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
            }
        }  
    </script>
   
</body>
 
</html>

hls-index.html

<head>
    <title>live</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
</head>
 
<body>
    <video id='my-video' class='video-js' controls preload='auto' width='640' height='320'
        data-setup='{ "html5" : { "nativeTextTracks" : true } }'>
        <source src='http://127.0.0.*:8080/live/dk.m3u8' type="application/x-mpegURL">
        <p class='vjs-no-js'>
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
        </p>
    </video>
 
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
 
    <script>
        var player = videojs('my-video');
        player.play();
    </script>
 
</body>

chvfily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
构建直播网站播放（并解决不同系统之间的问题）

摘要：有序搭建了一个推流视频直播平台，之前一直都是利用obs或ffmpeg进行推流，以srs作为视频流接收和转发服务器，利用ffmpeg->ffpaley作为拉流器播放视频，但是作为播放端应该尽量建议操作，因此基于此，在web浏览器上写了一个网页。网页的功能是要是：1.设置一个video标签2.设置视频流地址3.根据系统的不同，使用不同的视频格式，苹果系统的主要使用hls流，其他系统主要使用flv视频流，如果系统判定为苹果系统，则转跳到hls-index.htm...
复制链接

扫一扫

专栏目录