摄像头视频云台控制PTZ前端html css原生样式源码分享

最新推荐文章于 2024-09-02 09:02:18 发布

畅聊科技

最新推荐文章于 2024-09-02 09:02:18 发布

阅读量1.4k

点赞数

文章标签：前端音视频 javascript

本文链接：https://blog.csdn.net/qq_41605757/article/details/129101405

版权

该文章展示了一个基于HTML和JavaScript的EasyPlayer播放器示例，支持直播、自定义按钮和H265编码。用户可以输入视频URL进行播放，并通过按钮获取视频快照。此外，页面还包括缩放控制和滑动条交互功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyPlayer</title>
    <script src="./jquery.min.js"></script>
    <script src="./EasyPlayer-element.min.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<style>
   #player .easy-player {
        height: 400px;
        position: relative;
    }
</style>
<body>
    <h4 style="width:600px;margin: auto;">EasyPlayer播放器</h4>
    <br>
    <div style="width:600px;  height: 400px;position: relative;">
        <easy-player  id="player" live="true" show-custom-button="true" isH265="true" ></easy-player>
        <input type="text" id="value">
        <button id="btn">播放</button>
        <button id="btnSnap">快照</button>
    </div>
    <div class="wrapper">
        <div class="out">
          <div class="inner">
            <div class="add-reduce up">
              <icon class="add-icon zoomMouseup">＋</icon>
            </div>
            <div class="add-reduce down">
              <icon class="reduce-icon zoomMouseup">-</icon>
            </div>
          </div>
          <div class="triangle triangle1" id="triangle1"></div>
          <div class="triangle triangle2" id="triangle2"></div>
          <div class="triangle triangle3" id="triangle3"></div>
          <div class="triangle triangle4" id="triangle4"></div>
          <div class="triangle triangle5" id="triangle5"></div>
          <div class="triangle triangle6" id="triangle6"></div>
          <div class="triangle triangle7" id="triangle7"></div>
          <div class="triangle triangle8" id="triangle8"></div>
        </div>
        <!-- 滑动条 -->
    
      <input type="range" value="1" max="200" min="1"  id="inputRange">
      <span id="showValue">0</span>
      </div>
      
    

    <script>
        let vuePlayer = null
        var btn = document.getElementById('btn'); 
        var btnSnap = document.getElementById('btnSnap'); 
        let player = document.getElementById('player')
        
        // 地址栏
        var value = document.getElementById('value');
        //播放事件 传入地址播放
        btn.onclick = function(){
          console.log('player', player)
          $('#player').attr('video-url',value.value)

        }
        btnSnap.onclick = function(){
          if (!vuePlayer) vuePlayer = player.getVueInstance(); // 获取播放器实例
          var attrs = player.attributes;
          console.log('player', vuePlayer)
          vuePlayer.snapshot()
        }

    $(".up").mousedown(function () {
      console.log('放大zoomout点击事件')
    });
    $(".down").mousedown(function () {
      console.log('缩小zoomin点击事件')
    });

    $(".zoomMouseup").mouseup(function () {
        console.log('放大缩小离开事件')
    });
    // 滑动条事件
    $("#inputRange").change(function () {
      console.log($(this).val())
      $("#showValue").text($(this).val());
    })
    
    </script>
</body>
</html>