h5阿里云播放器 常规使用

阿里云播放器:

引入js和css

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

初始化:source一定要设置,不能空,会报错

 $(document).ready(function () { 
        player = new Aliplayer({
	    "id": "J_prismPlayer",
	    "source": "XXX",
	    "width": "100%",
	    "height": "800px",
	    "autoplay": false,
	    "isLive": false,
	    "rePlay": true,
	    "playsinline": true,
	    "preload": true,
	    "controlBarVisibility": "hover",
	    "useH5Prism": true
    }, function (player) {
    	player._switchLevel = 0;
	    }
    );
 });	

更改播放视频:

   	 //加载已关注直播间数据    
function browseDate(url){
	//改变视频内容
	player.loadByUrl(url);
}  

 

当然可以,以下是阿里云播放器的一个示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>阿里云播放器示例</title> <script src="https://player.aliyun.com/js/cdn/aliplayer-min.js"></script> <link rel="stylesheet" href="https://player.alicdn.com/aliplayer/css/aliplayer-min.css" /> <style type="text/css"> #player { width: 960px; height: 540px; } </style> </head> <body> <div id="player"></div> <script type="text/javascript"> var player = new Aliplayer({ id: 'player', source: 'http://player.alicdn.com/video/aliyunmedia.mp4', width: '100%', height: '100%', autoplay: true, isLive: false, rePlay: false, playsinline: true, preload: true, controlBarVisibility: 'hover', useH5Prism: true, skinLayout: [ { "name": "bigPlayButton", "align": "cc", "x": 30, "y": 80 }, { "name": "H5Loading", "align": "cc" }, { "name": "errorDisplay", "align": "tlabs", "x": 0, "y": 0 }, { "name": "infoDisplay" }, { "name": "tooltip", "align": "blabs", "x": 0, "y": 56 }, { "name": "thumbnail" }, { "name": "controlBar", "align": "blabs", "x": 0, "y": 0, "children": [ { "name": "progress", "align": "tlabs", "x": 0, "y": 44 }, { "name": "playButton", "align": "tl", "x": 15, "y": 12 }, { "name": "fullScreenButton", "align": "tr", "x": 10, "y": 12 }, { "name": "volume", "align": "tr", "x": 5, "y": 10 } ] } ] }, function (player) { console.log('播放器创建好了。') }); </script> </body> </html> ``` 你只需要将代码复制到一个HTML文件中,用浏览器打开即可看到播放器效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值