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播放器的使用的更多相关文章

  1. 阿里云web播放器

    原文地址:https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi 一.概念说明 1. pla ...

  2. Web播放器

    web视频播放器的使用及遇到的问题记录 TcPlayer播放器(腾讯Web超级播放器) https://cloud.tencent.com/document/product/881/20207 Ste ...

  3. 雷火神山直播超两亿，Web播放器事件监听是怎么实现的？

    Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...

  4. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  5. 阿里云弹性Web托管的URL重写问题

    今天将ThinkPHP写的网站搭到阿里云的弹性Web托管服务器上,出现路由问题 诸如访问 www.xxx.com/home/index.html会发生错误如下 页面报错: No input file ...

  6. 阿里云小规模web集群分享（电商）

    计算基础资源使用阿里云ECS.OSS.RDS.mysql中间件.CDN 原则是尽量少改动代码来实现web集群 1.负载均衡器: a)负责处理所有请求 b)http动态请求分配到后端web服务器 c)维 ...

  7. 阿里云服务器Web Deploy配置和使用Visual Studio进行Web项目发布部署遇到的坑

    阿里云的服务器一直闲着,烧着银子,当初花几千大洋开通,本想弄信息化的项目为所帮扶的贫困户脱贫助手,不想势单力薄,一直没有找到好的项目.最近大家都在众志成城抗击新肺疫情,于是又想能不能尽点自己的力量,于 ...

  8. 阿里云部署Web项目

    1.首先最基本的购买服务器和域名(学生党可以享受每月9块钱的优惠,不知道为什么,pc端不能购买,只能下载阿里云APP购买)  下载APP后打开:学生专区-学生特权-购买(我选择的是ubuntu,这个随 ...

  9. SWF Web播放器

    <HTML> <HEAD> <!-- saved from url=(0013)about:internet --> <TITLE> Untitled. ...

  10. 阿里云OSS Web端直传 服务器签名C#版

    最近用到队里OSS的文件上传,然后阿里官方给的四个服务器签名有Java PHP Python Go四个版本,就是没C#(话说写个C#有多难?) 百度了一下好像也没有,既然这样只能自己动手照着Java版 ...

随机推荐

  1. easyui项目问题集锦

    1.级联问题(combobox) combobox至多可以保存2个东西value和text,但我需要第三个数的时候,怎么办?比如,省.市.区的三级级联,我选择市的时候,需要市id,市name,区号,邮 ...

  2. 是什么让javascript变得如此奇妙

    What Makes Javascript Weird...and AWESOME -> First Class Functions -> Event-Driven Evironment ...

  3. LindAgile~大叔新宠~一个无所不能框架

    关于她 LindAgile是大叔在这两年里的新宠儿,它主推模块化,插件化,敏捷化,主要于LindAgile基础项目,LindAgile.Http项目,LindAgile.Modules项目和几个扩展模 ...

  4. Consul文档简要整理

    什么是Consul? Consul是一个用来实现分布式系统的服务发现与配置的开源工具.他主要由多个组成部分: 服务发现:客户端通过Consul提供服务,类似于API,MySQL,或者其他客户端可以使用 ...

  5. js存款计算器原生小demo

    大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...

  6. NYOJ 66 分数拆分

    分数拆分 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 现在输入一个正整数k,找到所有的正整数x>=y,使得1/k=1/x+1/y.   输入 第一行输入一个 ...

  7. jvm参数解析（含调优过程）

    前阵       对底层账单系统进行了压测调优,调优的最后一步--jvm启动参数中,减小了线程的堆栈空间:-XX:ThreadStackSize=256K,缩减至原来的四分之一,效果明显,不过并没有调 ...

  8. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  9. 记小白的一次基于vue+express+mongodb个人站开发

    学了vue和node一段时间了,折腾了一些零零散散的小东西.马上大四了要出去找工作了,所以早就想搭一个个人站作为一次较为全面的总结.因为没有设计功底,界面设计使我这种强迫症患者苦不堪言.幸而到最后花了 ...

  10. Java重定向和转发的路径问题

      路径问题:         ①相对路径和绝对路径:             绝对路径:  绝对路径是以/开头的路径!             相对于当前服务器的绝对路径: 如果是服务器解析,那么/ ...