ad
ad
主页 > 菜谱网 > 正文

一等奴妃:HTML5之阿里云视频播放器

更新时间:2019-05-02 17:08 点击数:

最终呈现

HTML5之阿里云视频播放器

代码参考

<!--
作者:楚洁自话
时间:2019-05-02
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试阿里云视频播放器</title>
</head>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.0/skins/default/aliplayer-min.css" />

<body>
<div class="mui-content">
<div class="player" id="player-con"></div>
</div>
<script type="text/javascript" charset="utf-8" src="http://g.alicdn.com/de/prismplayer/2.8.0/aliplayer-min.js"></script>
<script type="text/javascript">
initPage();
// 阿里云播放
function initPage() {
var player = new Aliplayer({
"id": "player-con",// 播放器外层容器的dom元素id
"source": "http://www.runoob.com/try/demo_source/movie.mp4",// 支持播放地址播放,此播放优先级最高
"width": "100%",
"height": "500px",
"autoplay": true,// 播放器是否自动播放
"isLive": false,// 播放内容是否为直播
"rePlay": false,// 播放器自动循环播放
"playsinline": true,// H5是否内置播放
"preload": true,// 播放器自动加载
"controlBarVisibility": "hover",// 控制面板的实现
"useH5Prism": true,// 指定使用H5播放器
"enableSystemMenu": false,// 是否允许系统右键菜单显示
"definition": 'FD'// 显示视频清晰度
}, function(player) {
console.log("播放器创建了。");
});
}
</script>
</body>
</html>

详细说明

让我们来具体看下各个属性的意思及其其他的属性:

HTML5之阿里云视频播放器

HTML5之阿里云视频播放器

HTML5之阿里云视频播放器

想要详细研究的朋友可以自行深入~~

HTML5之阿里云视频播放器


HTML5之阿里云视频播放器

乐于分享,共同成长,楚洁自话~~ 有问题还请不吝赐教~~多谢


一等奴妃:HTML5之阿里云视频播放器
ad
ad
图文信息
ad
ad
美食工坊,红餐网,美味食尚,天生吃货,美食侦探,美食天下,人气美食,菜谱网