hls协议播放后缀m3u8的监控视频

代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>cctv</title> 
    <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
</head>
<body>

<div id="myDiv">测试</div>
<button type="button" onclick="catalog()">获取通道</button>
<button type="button" onclick="loadInvite()">拉流</button>
<br>
<button type="button" onclick="moveleft()">left</button>
<button type="button" onclick="moveright()">right</button>
<button type="button" onclick="movestop()">stop</button>

<br><br><br><br><br>
<div id="id_test_video" style="width:100%; height:auto;"></div>

<script>

  var player = new TcPlayer('id_test_video', {

  "m3u8": "https://localhost:4200/jkdz/rtp/34020000001320000001_34020000001320000001/hls.m3u8", //请替换成实际可用的播放地址

  "autoplay" : true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的

  "poster" : "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=205652071,1642882044&fm=26&gp=0.jpg",

  "width" : '640',//视频的显示宽度，请尽量使用视频分辨率宽度

  "height" : '480'//视频的显示高度，请尽量使用视频分辨率高度

  });
</script>




</body>



<script>
  var xmlhttp;
  function get(url,data,cfunc)
  {
      if (window.XMLHttpRequest)
        {// IE7+, Firefox, Chrome, Opera, Safari 代码
            xmlhttp=new XMLHttpRequest();
        }
      else
        {// IE6, IE5 代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

      xmlhttp.onreadystatechange=cfunc;
      xmlhttp.open("GET",url+"?"+data,true);
      xmlhttp.send();
  }
  function post(url,data,cfunc)
  {
      if (window.XMLHttpRequest)
        {// IE7+, Firefox, Chrome, Opera, Safari 代码
            xmlhttp=new XMLHttpRequest();
        }
      else
        {// IE6, IE5 代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

      xmlhttp.onreadystatechange=cfunc;
      xmlhttp.open("POST",url,true);
      xmlhttp.send(data);
  }


  //获取流命令
  function loadInvite()
  {
    let msg = "msg=client test";  
    get("/gettv",msg,function(){
        //返回函数
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
  }

  //left
  function moveleft()
  {
    let msg = "";  
    get("/moveleft",msg,function(){
        //返回函数
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
  }
  //stop
  function movestop()
  {
    let msg = "";  
    get("/movestop",msg,function(){
        //返回函数
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
  }
  //right
  function moveright()
  {
    let msg = "";  
    get("/moveright",msg,function(){
        //返回函数
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
  }

  function catalog()
  {
    let msg = "";  
    get("/catalog",msg,function(){
        //返回函数
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
  }


  </script>

</html>

 

posted @ 2021-12-27 10:16  北极星下落不明  阅读(514)  评论(0)    收藏  举报