酷播云H5播放器自适应宽高实例

最新推荐文章于 2024-07-25 18:01:03 发布

阿酷tony

最新推荐文章于 2024-07-25 18:01:03 发布

阅读量367

点赞数 3

分类专栏：网页视频播放器酷播云（免费云存储） html5 文章标签： html5 jquery javascript

本文链接：https://blog.youkuaiyun.com/ffffffff8/article/details/139100101

版权

html5 同时被 3 个专栏收录

160 篇文章

订阅专栏

酷播云（免费云存储）

55 篇文章

订阅专栏

网页视频播放器

54 篇文章

订阅专栏

酷播云H5播放器自适应宽高

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>酷播云H5播放器自适应宽高</title>
  </head>
  <body>
    <div id="player"></div>
    <script src="//player.polyv.net/script/player.js"></script>
 

<script src="/js/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // 获取屏幕窗口宽高
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        // 设置 div 的宽高
        $("#player").width(windowWidth);
        $("#player").height(windowHeight);
        // 监听窗口大小变化
        $(window).resize(function () {
            // 获取新的屏幕窗口宽高
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            // 更新 div 的宽高
            $("#player").width(windowWidth);
            $("#player").height(windowHeight);
        });
        var player = polyvPlayer({
            wrap: '#player',
            width: '100%',
            height: '100%',
            autoplay: 'true',
            loop: 'true',
            volume:0,
            vid: '138dcc96672de50d310b61a288a99679_1',
        });
    });
    
  </script>
</body>
</html>