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

发表回复

后才能评论

本站部分资源需要解压密码,如需解压密码,解压密码则为“www.360mb.net”,如密码还是错误请联系客服。

本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,如需技术支持需支付技术服务费100+/次,请大家谅解!

本站源码已经购买的后续都是免费更新,且资源更新都是在同一文章,不会新开一贴,不会重新收费,这一点我们和其他很多同行网站规则都不一样,望各位知晓!

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。