支持m3u8的H5播放器-Aliplayer阿里出品,播放速度还不错

来源:m3u8播放器 浏览:1429次 时间:2020-11-06
做网站找雨过天晴工作室

支持m3u8的H5播放器-Aliplayer阿里出品,播放速度还不错

支持清晰度自动选择

目前官网的是2.9,好像没有什么更新,这个代码用的是2.8.2,效果更好

演示地址http://zhanzhang.cnzzla.com/player/

选择AliPlayer播放器(记忆播放+点播视频)

官网地址:https://player.alicdn.com/aliplayer/index.html

功能展示:https://player.alicdn.com/aliplayer/presentation/index.html?type=cover

在线配置:https://player.alicdn.com/aliplayer/setting/setting.html



 <link rel="stylesheet" href="/css/player/aliplayer/aliplayer-min.css" />
  <script type="text/javascript" charset="utf-8" src="/css/player/aliplayer/aliplayer-min.js"></script>
  <script type="text/javascript" charset="utf-8" src="/css/player/aliplayer/aliplayercomponents.min.js"></script>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
  <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
  <script type="text/javascript" charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>


<div id="aliplay" class="prism-player"></div>
<script type="text/javascript">
var player = new Aliplayer({
         id: "video-player",
     source: "播放地址",
      width: "100%",
     height: "100%",
     cover: "缩略图",
   autoplay: true,
    preload: true,
     rePlay: false,
playsinline: false,
 useH5Prism: false,
     isLive: false,
autoPlayDelay: 0,
autoPlayDelayDisplayText: '请等待...',
 components: [{
       name: 'MemoryPlayComponent',
       type: AliPlayerComponent.MemoryPlayComponent,
       args: [true]
    }],
skinLayout:[
    {name: "bigPlayButton",align:"cc",x:0,y:0},
    {name:"H5Loading",align:"cc"},
    {name:"errorDisplay",align:"tlabs",x:0,y:0},
  {name:"infoDisplay"},
  {name:"tooltip",align:"blabs",x:0,y:56},
  {name:"controlBar",align:"blabs",x:0,y:0,
     "children":[
       {name:"progress",align:"blabs",x:0,y:44},
       {name:"playButton",align:"tl",x:15,y:12},
       {name:"timeDisplay",align:"tl",x:10,y:7},
       {name:"fullScreenButton",align:"tr",x:10,y:12},
       {name:"setting",align:"tr",x:15,y:12},
       {name:"volume",align:"tr",x:5,y:10}
   ]}
]}, 
function (player) {
      console.log("The player is created");
  }
 );
</script>