支持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>