阿里云视频(Aliplayer)HTML5播放器使用实例，支持点播、直播

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架构的！

使用说明：