Web SDK

最近更新时间:2018-07-20 16:20:31

Web SDK

产品简介

KSPlayer是金山云推出的Web端视频播放器,主要解决在手机浏览器和PC浏览器上播放音视频流的问题。

Web SDK

功能介绍

金山云Web播放SDK支持在所有桌面和移动端浏览器上播放mp4、m3u8格式的点播视频,具体可见Web播放

KSPlayer直播视频播放
  • 支持中英文界面
  • 支持界面自适应缩放
  • 支持H5和flash播放技术自动选择
  • 支持组件插件自定义
  • 支持hls直播的网络自适应,即根据网络状况自动切换码率
  • 支持音量调节
KSPlayer直播视频播放格式支持
播放格式 PC浏览器 移动端浏览器
HLS(m3u8) 支持 支持
MP4 支持 支持
FLV 支持 不支持

开发指南

使用对象

  • 面向所有使用该SDK的开发人员, 测试人员等
  • 要求读者具有一定的Javascript编程开发经验

工程下载

1、CDN方式

您可以从金山云的服务器上获取ksplayer需要脚本文件和样式,引入需要播放视频的页面(包括PC或H5)。

<link href="//ksplayer.video.ksyun.com/v1/ksplayer.min.css" rel="stylesheet">

<script src="//ksplayer.video.ksyun.com/v1/ksplayer.min.js"></script>

2、自托管方式

您也可以下载ksplayer.js及其样式文件到您自己的服务器上。PC端请使用IE10以上版本的现代浏览器。

<link href="//example.com/path/to/video-js.min.css" rel="stylesheet">

<script src="//example.com/path/to/ksplayer.min.js"></script>

<script>

     ksplayer.options.flash.swf = "http://example.com/path/to/ksplayer.swf"

</script>

集成步骤

1、添加video标签到您的页面

您只需要使用HTML5的video标签来嵌入视频。ksplayer会读取这个标签,让他在所有主流浏览器中生效(不仅限于那些支持HTML5 video标签的浏览器)。video标签还需要自定义id属性并添加video-js class属性。

<video id="example_video_1" class="video-js" controls width="640" height="264" poster=""> 
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> 
    <p class="vjs-no-js">观看视频需要允许JavaScript,并更新浏览器以
        <a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
    </p> 
</video>

ksplayer提供了两套皮肤,默认样式和高级样式,可以分别通过在class属性中增加js-default-skin,js-sublime-skin和mobile-first-skin类更换播放器皮肤。另外通过添加额外的vjs-big-play-centered类可以使播放按钮居中。

2、初始化设置播放器

当ksplayer.js库已加载,而且video标签页加载到DOM后,运行如下js代码进行ksplayer的初始化。

var player = ksplayer("example_video_1", {options}, function(){         
    // 播放器 (this) 已经初始化完毕   
});

ksplayer函数的第一个参数是video标签的ID。

第二个参数是一个对象。用于设置一些播放器的选项参数。详见:

第三个参数是ready回调函数。一旦ksplayer初始化完成,该函数将被调用。

该函数的返回一个播放器对象,该对象上的和参见API总览中相应部分。

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

金山云,开启您的云计算之旅

免费注册