aliyunvideo / AliyunPlayer_Web

The kinds of demo for H5 Aliplayer, which cover live, playback and multiple platforms, such as mobile, pc and weixin and so on
MIT License
931 stars 1.02k forks source link

aliplayer可以根据窗口大小动态调整播放器高度吗? #85

Open ifq opened 4 years ago

ifq commented 4 years ago

如题,我根据模板配置的:

    var player = new Aliplayer({
          "id": "player-con",
          "source": "https://deepdream-pub.oss-cn-shenzhen.aliyuncs.com/deepdream-intro.mp4",
          "width": "100%",
          "height": "800px",
          "autoplay": true,
          "isLive": false,
          "rePlay": false,
          "playsinline": true,
          "preload": true,
          "autoPlayDelay": "",
          "controlBarVisibility": "always",
          "videoWidth": "100%",
          "useH5Prism": true,
          "skinLayout": [
              {
                  "name": "bigPlayButton",
                  "align": "blabs",
                  "x": 30,
                  "y": 80
              },
              {
                  "name": "controlBar",
                  "align": "blabs",
                  "x": 0,
                  "y": 0,
                  "children": [
                      {
                          "name": "playButton",
                          "align": "tl",
                          "x": 15,
                          "y": 12
                      }
                  ]
              }
          ]
      }, function (player) {
          console.log("The player is created");
      }
                                );

如果我缩小窗口,播放器宽度会随着改变,但是高度设置成100%就会没有显示了。 还是说这个要通过js来实现? 这样试过也不行。


      function displayWindowSize(){
          // Get width and height of the window excluding scrollbars
          var w = document.documentElement.clientWidth;
          var h = document.documentElement.clientHeight;

          player.height = h - 100 + "px";
          //player.setPlayerSize(w,h);
          console.log("player height:", player.height);
      }

      // Attaching the event listener function to window's resize event
      window.addEventListener("resize", displayWindowSize);
zhaoyingzi commented 3 years ago

播放器的容器高度必须是固定的,可以试一下在播放器容器的外面包一层div,对这个div做动态调整