zoukankan      html  css  js  c++  java
  • h5connect.js 腾讯云视频点播使用指南

    http://video.qcloud.com/download/docs/QVOD_Player_Web_SDK_Developer_Guide.pdf 

    腾讯云视频点播服务

    Web播放器SDK开发指南版本:1.3.3时间:2015.12目录

     

    1.概述

    腾讯云视频点播播放器Web SDK解决方案,可帮助腾讯云视频用户直接使用经过验证的视频播放能力,通过灵活的接口,快速同自有Web应用集成,以实现桌面应用播放功能。该SDK所播放的文件受限于全局防盗链功能定义。详细内容请查看官网FAQ安全功能相关说明。

     

    2.阅读对象

    该文档面向考虑使用腾讯云视频点播播放器Web SDK进行开发并具备javascript语言基础的开发人员。

     

    3.准备

    ·注册腾讯云点播并上传视频

    ·页面引入初始化脚本

    < script src = "http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js"

    charset = "utf-8" > < /script>

    注意,播放页面需要挂 ip 或域名访问,如若直接打开本地静态页面将无法播放

     

    4. 开始 API 使用

     

    4.1. 方法总览

    l 构造类

    构造播放器 qcVideo.Player

     

    l 获取参数和状态

    获取当前音量 getVolume

    获取当前视频总时长 getDuration

    获取当前播放位置 getCurrentTime

    当前播放状态“加载中”查询 isSeeking

    当前播放状态“暂停中”查询 isSuspended

    当前播放状态“播放中”查询 isPlaying

    当前播放状态“播放结束”查询 isPlayEnd

    获取当前播放器宽度 getWidth

    获取当前播放器高度 getHeight

    获取当前视频清晰度 getClarity

    获取当前视频清晰度 getAllClaritys

     

    l 设置和动作

    设置当前播放器宽度高度 resize

    播放指定时长点 play

    暂停当前播放的视频 pause

    恢复播放视频 resume

    更换视频清晰度 setClarity

    动态更换视频 changeVideo

    添加弹幕 addBarrage

    关闭弹幕 closeBarrage

     

    4.2. 详细方法

    l 构造类

    qcVideo.Player(id,option,listener)

    功能:播放器构造函数

    参数:

    1 id: String ; 必选参数 ;页面放置播放器的容器 ID

    2 option: Object; 必选参数 ;播放参数

    3 listener: function; 可选参数 ; 播放状态变化回调函数

     

    示例一 (传点播文件 ID 的方式)

    var player = new qcVideo.Player(

    / / 页面放置播放位置的元素ID“element_id”, {

    //视频 ID (必选参数)

    “file_id”: “16092504232103514290”,

    //应用 ID (必选参数),同一个账户下的视频,该参数是相同的

    “app_id”: “1251132611”,

    //是否自动播放 默认值0 (0: 不自动,1: 自动播放)

    “auto_play”: “0”,

    //播放器宽度,单位像素

    “width”: 640,

    //播放器高度,单位像素

    “height”: 480,

    //屏蔽全屏播放标识,默认值0 (0: 支持全屏播放,1: 禁用全屏播放)

    “disable_full_screen”: 0,

    //禁止拖动标识,默认值0 (0: 允许拖拽,1: 禁止拖拽)

    “disable_drag”: 1,

    //如视频尺寸小于播放器尺寸,拉伸视频至播放器大小,默认值0 (0: 不拉伸,1: 拉伸全屏)

    “stretch_full”: 1,

    “stop_time”: 60,

    //60秒后停止播放(试看功能) , 并且触发“playStatus”事件

    “remember”: 1 //1:记住上一次未看完的时间点,下次再播放,从该时间点开始播放

    //开启防盗链后,可以通过配置下面的可访问的视频地址,支持播放器播放;清晰度类型通

    url与后台查出的url前缀匹配得到“playbackRate”: 1,

    加速播放,

    譬如2,表示2倍速度播放,1 / 2表示慢正常速度一倍播放,注意这个值暂时只对h5播放生效;“videos”: [“http: //xxx.myqcloud.com/xxxyy_f220.m3u8?sign=xxx”

    …],

    //注意,下面所有的地址必须是上面对应的 file_id 的视频资源地址,否则不会生效

    “WMode”: “window”,

    //默认 window 不支持其他页面元素覆盖在上面,如需要可以

    修改为opaque或其他flash Vmode的参数值“stretch_patch”: false,

    //默认为 false ,设置为 true 支持将开始、暂停、结束时的图片

    贴片,铺满播放器

    }, {

    //全屏/退出全屏操作 ,isFullScreen: trueà全屏 ; falseà 退出全屏

    ‘fullScreen’: function(isFullScreen) {

    //console.debug(‘out listener isFullScreen == ‘,isFullScreen);

    },

    //播放状态

    ‘playStatus’: function(status) {

    /*status 可为 {ready: “播放器已准备就绪”,seeking:”搜索”,

    suspended:”暂停”, playing:”播放中” , playEnd:”播放结束” , stop: “试看

    结束触发”}’*/

    //console.debug(‘out listener status == ‘,status);

    },

    //拖动播放位置变化 second 拖动播放的位置(单位秒)

    ‘dragPlay’: function(second) {

    //console.debug(‘out listener dragPlay == ‘,second);

    }

    });

    示例二 (传视频文件播放地址的方式)

    var player = new qcVideo.Player(

    //页面放置播放位置的元素 ID

    “element_id”, {

    //是否自动播放 默认值0 (0: 不自动,1: 自动播放)

    “auto_play”: “0”,

    //播放器宽度,单位像素

    “width”: 640,

    //播放器高度,单位像素

    “height”: 480,

    //屏蔽全屏播放标识,默认值0 (0: 支持全屏播放,1: 禁用全屏播放)

    “disable_full_screen”: 0,

    //禁止拖动标识,默认值0 (0: 允许拖拽,1: 禁止拖拽)

    “disable_drag”: 1,

    //如视频尺寸小于播放器尺寸,拉伸视频至播放器大小,默认值0 (0: 不拉伸,1: 拉伸全屏)

    “stretch_full”: 1,

    “stop_time”: 60,

    //60秒后停止播放(试看功能) , 并且触发“playStatus”事件

    “remember”: 1 //1:记住上一次未看完的时间点,下次再播放,从该时间点播放

    //注意,下面所有的地址必须包含 duration(时长)

    “WMode”: “window”,

    //默认 window 不支持其他页面元素覆盖在上面,如需要可以

    修改为opaque或其他flash Vmode的参数值“stretch_patch”: false,

    //默认为 false ,设置为 true 支持将开始、暂停、结束时的图片

    贴片,铺满播放器“third_video”: {‘duration’: 20,

    //视频时长(单位秒)

    //10/210->手机, 20/220->标清 , 30/230->高清 , 40/240->超清 ; (至少包含

    一个地址)‘urls’: {

    10: “mp4手机视频地址”,

    20: “mp4标清视频地址”,

    30: “mp4高清视频地址”,

    40: “mp4超清视频地址”,

    210: “hls手机视频地址”,

    220: “hls标清视频地址”,

    230: “hls高清视频地址”,

    240: “hls超清视频地址”

    }

    }

    },

    {

    //全屏/退出全屏操作 ,isFullScreen: trueà全屏 ; falseà 退出全屏

    ‘fullScreen’: function(isFullScreen) {

    //console.debug(‘out listener isFullScreen == ‘,isFullScreen);

    },

    //播放状态

    ‘playStatus’: function(status) {

    /*status 可为 {ready: “播放器已准备就绪”,seeking:”搜索”,

    suspended:”暂停”, playing:”播放中” , playEnd:”播放结束” , stop: “试看

    结束触发”}’*/

    //console.debug(‘out listener status == ‘,status);

    },

    //拖动播放位置变化 second 拖动播放的位置(单位秒)

    ‘dragPlay’: function(second) {

    //console.debug(‘out listener dragPlay == ‘,second);

    }

    });

    l获取参数和状态

    getVolume()功能:取当前音量返回:Number,取值范围(01;0.5

    getDuration()功能:取当前视频总时长返回:int,单位秒

    getCurrentTime()功能:取当前播放位置返回:int,单位秒

    isSeeking()功能:当前播放状态是否“加载中”返回:Boolean;

    true为”加载中”

    isSuspended()功能:当前播放状态是否“暂停中”返回:Boolean;

    true为”暂停中”

    isPlaying()功能:当前播放状态是否“播放中”返回:Boolean;

    true为”播放中”

    isPlayEnd()功能:当前播放状态是否“播放结束”返回:Boolean;

    true为”播放结束”

    getWidth()功能:取当前播放器宽度返回:int

    getHeight()功能:取当前播放器高度返回:int

    getClarity()功能:取当前视频的清晰度返回:int(1: ”手机”,

    2: “标清”,

    3: “高清”,

    4: “超清”)

    getAllClaritys()功能:取当前视频全部的清晰度返回:Array < int > (1: ”手机”,

    2: “标清”,

    3: “高清”,

    4: “超清”)

     

    l设置和动作

    resize(width, height)功能:设置当前播放器宽度高度参数:

    1 int;播放器宽度

    2 height: int;播放器高度

    play(second)功能:开始播放指定时长点参数:int;

    second单位秒返回:int;操作结果返回码

    pause()功能:暂停当前播放的视频返回:int;操作结果返回码

    resume()功能:恢复播放视频返回:int;操作结果返回码

    setClarity(clarity)功能:更换视频清晰度参数:int;

    clarity清晰度取值范围(1:”手机”, 2:”标清”, 3:”高清”, 4:”超清”)注意:clarity指定的清晰度,请确保当前视频具备该清晰度,否则将按播放器默认规则选择一个清晰度播放返回:int;操作结果返回码

    changeVideo(opt)功能:动态更换视频参数:opt Object;包含将要播放的视频的基本信息,和构造函数第二个参数基本一致;返回:int;操作结果返回码示例:

    player.changeVideo({

    //视频 ID (必选参数)

    “file_id”: “16092504232103514290”,

    //应用 ID (必选参数)

    “app_id”: “1251132611”,

    //是否自动播放 默认值0 (0: 不自动,1: 自动播放)

    “auto_play”: “0”,

    //屏蔽全屏播放标识,默认值0 (0: 支持全屏播放,1: 禁用全屏播放)

    “disable_full_screen”: 0,

    //非点播用户或开防盗链的用户 ,切换视频源使用下面参数,同构造方法输入

    “third_video”: null

    });

    addBarrage(barrage)功能:添加弹幕参数:Array;

    barrage弹幕信息返回:int;操作结果返回码示例:

    player.addBarrage([{

    “type”: ”content”,//消息类型 ,content:普通文本 ()

    “content”: ”hello world”,//文本消息 ()

    “time”: ”1.101”,//单位秒 ,表示 距离当前调用添加字幕的时间多久后,开始显示该条字幕 (必选)

    }, {“type”: ”content”,//同上条 ()

    “content”: ”MD35号字居中”,//同上条 ()

    “time”: ”2.101”,//同上条 ()

    “style”: “C64B03;35”, // 分号分割,第一项颜色值,第二项字体 ()

    “postion”: ”center” //固定位置 center: 居中,bottom: 底部, up: 顶上 ()

    },

    …])

    closeBarrage()功能:关闭弹幕,

    调用addBarrage后,弹幕将继续开启返回:int;操作结果返回码l返回码·200: 操作成功·0: 播放器未完全初始化· - 1: 动态更换失败视频,缺少必要参数· - 2: 未知操作命令· - 3: 播放时间超出有效播放范围

     

    5.视频文件上传功能

    用户可使用点播上传Web SDK,以帮助腾讯云视频用户通过Web上传视频文件。该SDK当前支持HTML5上传(不支持HTML5的浏览器暂不支持上传)具体操作方法请阅:http: //video.qcloud.com/sdk/upload.html

     

    6.视频文件操作API说明

    关于如何对视频文件进行操作,包括上传,发布等内容,请参考官网链接:

    http: //wiki.qcloud.com/wiki/v2/CreateVodTags

    7.SDK升级历史信息和文档变更版本号发布日期说明

    1.0 2015.5第一版本,基本播放功能;

    1.1 2015.6新增视频拖动播放位置事件

    1.1 2015.6新增视频全屏 / 退出全屏事件

    1.1 2015.6新增支持防盗链调用播放器

    1.2 2015.6.23新增支持非点播用户使用播放器

    1.3 2015.7新增文件上传功能;播放器禁止拖动和拉伸视频至播放器大小

    1.3.1 2015.08.17增加试用配置 / 播放记忆功能

    1.3.2 2015.08.31增加试看结束回调事件

    1.3.3 2015.09.15增加弹幕展示

    1.3.3 2015.09.15增加修改flash显示层级Wmode

    1.3.3 2015.09.15增加拉伸图片贴片高宽至播放器大小stretch_patch

    1.3.3 2015.09.15增加关闭弹幕的接口

    1.3.3 2015.11.23点播用户使用防盗链传URL的参数

    1.3.3 2015.12.22点播H5播放,支持加速减速播放playbackRate

     

    8.反馈和建议

    腾讯云用户可以通过提交工单或联系客服的方式,对使用中发现的问题和意见建议进行反馈,我们的技术人员会同您联系。如果上面的API方法不能满足您的需求,如果您有好的建议和想法,都可以邮件我们的攻城狮trumpli@tencent.com。——文档结束——

  • 相关阅读:
    Oracle 数据库连接很慢,服务器监听一直等待
    Maven 根据不同的环境使用不同的配置
    Maven 根据不同的包路径打出不同的Jar包
    Linux 安装Nginx并支持SSL
    Nginx OpenSSL创建自签证书实现HTTP转HTTPS
    Oracle 服务突然中断处理(检查状态、重启)
    请求转发和重定向
    PHP PDO的简单封装(使用命名空间方式)
    PHP PDO学习小结
    MYSQL预处理机制
  • 原文地址:https://www.cnblogs.com/niwalala/p/5099739.html
Copyright © 2011-2022 走看看