阿里云Prismplayer-Web播放器的使用
Prismplayer是一套在线视频播放技术方案,同时支持Flash和Html5两种播放技术,可对播放器进行功能配置和皮肤定制。其在线使用文档地址为:https://help.aliyun.com/document_detail/43549.html?spm=5176.video44236.6.128.tLFTj1
需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07
以下为本人按照文档写的一个小demo。本例中引入的js是H5版本的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/1.7.4/skins/default/index.css" />
<script src="https://g.alicdn.com/de/prismplayer/1.7.4/prism-h5-min.js"></script>
<style>
.video-wrap {
position: relative;
width: 800px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="video-wrap">
<div id="J_prismPlayer" class="prism-player"></div>
</div>
<script>
// 初始化播放器
var player = new prismplayer({
id: "J_prismPlayer", // 容器id
source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4", //视频地址
cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg", //播放器封面图
autoplay: false, // 是否自动播放
width: "100%", // 播放器宽度
height: "450px", // 播放器高度
playsinline: true,
seekable: true,
skinLayout: [{
"name": "bigPlayButton",
"align": "cc",
//"x": 30,
//"y": 80
}, {
"align": "blabs",
"x": 0,
"y": 0,
"name": "controlBar",
"children": [
{
"align": "tl",
"x": 15,
"y": 26,
"name": "playButton"
}, {
"align": "tl",
"x": 10,
"y": 24,
"name": "timeDisplay"
}, {
"align": "tr",
"x": 20,
"y": 25,
"name": "fullScreenButton"
}, {
"align": "tr",
"x": 20,
"y": 25,
"name": "volume"
},
{
"name": "progress",
"align": "tlabs",
"x": 0,
"y": 0
}
]
}]
});
</script>
</body>
</html>
阿里云Prismplayer-Web播放器的使用的更多相关文章
- 阿里云web播放器
原文地址:https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi 一.概念说明 1. pla ...
- Web播放器
web视频播放器的使用及遇到的问题记录 TcPlayer播放器(腾讯Web超级播放器) https://cloud.tencent.com/document/product/881/20207 Ste ...
- 雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- 阿里云弹性Web托管的URL重写问题
今天将ThinkPHP写的网站搭到阿里云的弹性Web托管服务器上,出现路由问题 诸如访问 www.xxx.com/home/index.html会发生错误如下 页面报错: No input file ...
- 阿里云小规模web集群分享(电商)
计算基础资源使用阿里云ECS.OSS.RDS.mysql中间件.CDN 原则是尽量少改动代码来实现web集群 1.负载均衡器: a)负责处理所有请求 b)http动态请求分配到后端web服务器 c)维 ...
- 阿里云服务器Web Deploy配置和使用Visual Studio进行Web项目发布部署遇到的坑
阿里云的服务器一直闲着,烧着银子,当初花几千大洋开通,本想弄信息化的项目为所帮扶的贫困户脱贫助手,不想势单力薄,一直没有找到好的项目.最近大家都在众志成城抗击新肺疫情,于是又想能不能尽点自己的力量,于 ...
- 阿里云部署Web项目
1.首先最基本的购买服务器和域名(学生党可以享受每月9块钱的优惠,不知道为什么,pc端不能购买,只能下载阿里云APP购买) 下载APP后打开:学生专区-学生特权-购买(我选择的是ubuntu,这个随 ...
- SWF Web播放器
<HTML> <HEAD> <!-- saved from url=(0013)about:internet --> <TITLE> Untitled. ...
- 阿里云OSS Web端直传 服务器签名C#版
最近用到队里OSS的文件上传,然后阿里官方给的四个服务器签名有Java PHP Python Go四个版本,就是没C#(话说写个C#有多难?) 百度了一下好像也没有,既然这样只能自己动手照着Java版 ...
随机推荐
- 【前端,干货】react and redux教程学习实践(二)。
前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...
- 数据库db2错误代码大全
sqlcode sqlstate 说明000 00000 SQL语句成功完成01xxx SQL语句成功完成,但是有警告+012 01545 未限定的列名被解释为一个有相互关系的引用+098 01568 ...
- python学习===从一个数中分解出每个数字
题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153=1 ...
- echarts之词云随机颜色的配置
echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...
- java 分解质因数 基础增强
题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 为了熟悉加强基础练习,搞搞经典小demo..话不多说,直接贴代码,看注释.package www.test;import j ...
- MBProgressHUD1.0.0源码解析
MBProgressHUD是一个显示提示窗口的三方库,常用于用户交互.后台耗时操作等的提示.通过显示一个提示框,通知用户操作或任务的执行状态:同时,利用动画效果,降低用户等待的焦虑心理,增强用户体验. ...
- 中点Bresenham画圆
这里不仔细讲原理,只是把我写的算法发出来,跟大家分享下,如果有错误的话,还请大家告诉我,如果写的不好,也请指出来,一起讨论进步. 算法步骤: (1) 输入圆的半径R. (2) 计算初始值d = 1 - ...
- css3类选择器之结合元素选择器和多类选择器
css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...
- django服务器正常打开,本地localhost能连上,其他计算机却连不上
最近在学习Django,在搭建好django并且启动服务器后,遇到了麻烦. 问题现象: django服务器正常打开,本地localhost能连上,其他计算机却连不上 问题原因(可能存在原因): 这里的 ...
- Markdown+Pandoc 最佳写作拍档 (mailp.in)
Markdown+Pandoc 最佳写作拍档 我们为什么写作? 自从人们开始写作,写作便是记录.抒发.批判.反省的好工具.从石板上的刻印到笔墨纸砚,再到如今的信息时代.从静态的个人主页到托管博客,从个 ...