zoukankan      html  css  js  c++  java
  • 阿里云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;
                 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,      // 是否自动播放
             "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>
  • 相关阅读:
    OC语言前期准备
    C语言指针
    C语言字符串
    C语言数组
    python语法
    shell脚本命令 运行python文件&python命令行运行python代码
    HTTP Status完整枚举
    CRON表达式
    mybatis-generator生成的mapper中的
    iOS事件的响应和传递机制
  • 原文地址:https://www.cnblogs.com/libo0125ok/p/7027868.html
Copyright © 2011-2022 走看看