首页 > Web开发 > 详细

阿里云Prismplayer-Web播放器的使用

时间:2017-06-16 16:19:51      阅读:3471      评论:0      收藏:0      [点我收藏+]

Prismplayer是一套在线视频播放技术方案,同时支持Flash和Html5两种播放技术,可对播放器进行功能配置和皮肤定制。其在线使用文档地址为:https://help.aliyun.com/document_detail/43549.html?spm=5176.video44236.6.128.tLFTj1

以下为本人按照文档写的一个小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播放器的使用

原文:http://www.cnblogs.com/liboxncg/p/7027868.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!