首页 > 代码库 > 阿里云Prismplayer-Web播放器的使用

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

2024-10-07 02:49:01   215人阅读

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播放器的使用


联系
我们