• 资源介绍
  • Aliplayer播放器兼容性还是很不错的,功能也比较全,目前我也发现很多站点也都在使用,相对百度视频播放器、七牛视频播放器、腾讯视频播放器来说阿里云视频播放器(Aliplayer)个人感觉是最好用的,西瓜视频播放器也还不错!

    注:下面代码中我们去除了“字幕”按钮,设置了播放按钮居中,最大程度进行了自定义设置,官方仓库中没有发行,所有部分插件没有CDN文件,需要自己下载到本地使用(如:列表、清晰度等)或者自己同步一下仓库,发行一下就可以使用CDN调用,下面代码仅做参考使用,也可以去官网配置!

    直播实例代码参考:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <meta name="referrer" content="no-referrer">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- IE内核 强制使用最新的引擎渲染网页 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 ,maximum-scale=1.0, user-scalable=no"><!-- 手机H5兼容模式 -->
    <meta name="x5-fullscreen" content="true" ><meta name="x5-page-mode" content="app" > <!-- X5  全屏处理 -->
    <meta name="full-screen" content="yes"><meta name="browsermode" content="application">  <!-- UC 全屏应用模式 -->
    <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <!--  苹果全屏应用模式 -->
        <title>Aliplayer Online Settings</title>
        <link
          rel="stylesheet"
          href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css"
        />
        <script
          type="text/javascript"
          charset="utf-8"
          src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"
        ></script>
          <style type="text/css">
          html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
        </style>
        <script type="text/javascript">
          window.addEventListener("resize", function () {
            document.getElementById("mse").style.height = window.innerHeight + "px";
          });
        </script>
      </head>
      <body>
        <div class="prism-player" id="player-con"></div>
        <script>
          var player = new Aliplayer(
            {
              id: "player-con",
              source:
                "<?php echo($_REQUEST['url']);?>",
              width: "100%",
              height: "100%",
              autoplay: true,
              isLive: true,
              rePlay: true,
              playsinline: true,
              preload: true,
              controlBarVisibility: "hover",
              useH5Prism: true,
              skinLayout: [
                {
                  name: "bigPlayButton",
                  align: "cc",
                  x: 30,
                  y: 80,
                },
                {
                  name: "errorDisplay",
                  align: "tlabs",
                  x: 0,
                  y: 0,
                },
                {
                  name: "infoDisplay",
                },
                {
                  name: "controlBar",
                  align: "blabs",
                  x: 0,
                  y: 0,
                  children: [
                    {
                      name: "liveDisplay",
                      align: "tlabs",
                      x: 15,
                      y: 6,
                    },
                    {
                      name: "fullScreenButton",
                      align: "tr",
                      x: 10,
                      y: 10,
                    },
                    {
                      name: "volume",
                      align: "tr",
                      x: 5,
                      y: 10,
                    },
                  ],
                },
              ],
            },
            function (player) {
              console.log("The player is created");
            }
          );
        </script>
      </body>
    </html>
    

     

    注:浏览器出现“Flash Player插件未安装安装插件,如果已经安装请检查是否被禁用”是因为现在多数浏览器不支持Flash导致,对用户来说不太友好,所以我们日后更新的播放器都将是HTML5架构的!

    使用说明:

    • 播放直播流时需要将isLive设置为true,点播则改为 isLive: false
    • 本帖附件集成了直播与点播实例,下载附件后,上传源码至服务器,地址加上?url=视频地址即可播放

    更多说明:

    • 文档参考:https://help.aliyun.com/document_detail/125570.html
    • 在线配置:http://player.alicdn.com/aliplayer/setting/setting.html
    喜欢 0
    1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
    2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
    3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
    4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
    5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!

    360模板吧 » 阿里云视频(Aliplayer)HTML5播放器使用实例,支持点播、直播

    发表评论