master

分支 (2)

标签 (1)

管理

管理

master

v1.0

v1.0.0

nginx-rtmp
/
tmp
/
test.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <title>Test</title>
        <style>
            video {
                width: 100%;
                height: 360px;
                border: 1px solid gray;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="row">
                <div class="col">
                    <video id="videoPlayer" controls></video>
                    <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Url</span>
                    </div>
                    <input type="url" class="form-control" placeholder="http:ip:port/dash/stream.mpd | http:ip:port/hls/stream.m3u8">
                    <button id="play" class="btn btn-sm btn-warning ">Go→</button>
                  </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col">
                    <textarea id="paste" style="width: 100%" rows="3" placeholder="paste conten here"></textarea>
                </div>
            </div>
            <div id="copy" class="row">

            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
        <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

        <script>
            let paste = document.querySelector('#paste')
            let copy = document.querySelector('#copy')
            paste.addEventListener('paste', (event)=> {
                event.target.value = ''
                let data = event.clipboardData.getData('Text')
                let div = creatCopyEl(data)
                div && copy.appendChild(div)
            })
            function creatCopyEl(data) {
                if (data.trim().length === 0) return false
                let div = document.createElement('div')
                let content = document.createElement('p')
                content.innerText = data
                let card_body = document.createElement('div')
                card_body.className="card-body"
                card_body.appendChild(content)
                let card = document.createElement('div')
                card.className = 'card '
                card.appendChild(card_body)
                div.appendChild(card)
                // div.innerHTML = data
                div.style = "cursor:pointer"
                div.className = "col-sm-12 col-md-4"
                div.addEventListener('click', (e)=>{
                    let el = e.target
                    if (document.body.createTextRange) {
                        let range = document.body.createTextRange();
                        range.moveToElementText(el);
                        range.select();
                    } else if (window.getSelection) {
                        let selection = window.getSelection();
                        let range = document.createRange();
                        range.selectNodeContents(el);
                        selection.removeAllRanges();
                        selection.addRange(range);
                    } else {
                        console.log("can not select the el");
                    }
                    document.execCommand('Copy','false',null);
                    console.log('复制: ' + el.innerText)
                })
                return div
            }
            function dash (url, id) {
                let player = dashjs.MediaPlayer().create();
                player.initialize(document.querySelector('#' + id), url, true);
            }
            function hls (url, id) {
                if(Hls.isSupported()) {
                    let video = document.getElementById(id);
                    let hls = new Hls();
                    hls.loadSource(url);
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED,function() {
                      video.play();
                    });
                } else {
                    console.log('browser not support HLS')
                }
            }
            document.querySelector('#play').addEventListener('click', (event)=>{
                let input_ = event.target.parentNode.querySelector('input')
                let url = input_ !== null ? input_.value : ''
                if (url.length > 0) {
                    console.log(url)
                    if (url.indexOf('dash') > 0) {
                        dash(url, 'videoPlayer')
                    } else if (url.indexOf('hls') > 0) {
                        hls(url, 'videoPlayer')
                    }
                }
            })
        </script>
    </body>
</html>