krpano教程：Videoplayer插件中文说明

插件说明：

• 用于插入视频到全景中的功能插件
• 通过<layer>插入视频,
• 通过 <hotspot>插入视频,
• 作为全景视频，设置<image>为全景视频参数.

语法：

1、普通layer形式插入视频: 
<layer name="video"
       url.flash="videoplayer.swf"
       url.html5="videoplayer.js"
       videourl="video.m4v|video.webm"
       posterurl="videoposter.jpg"
       align="center" x="0" y="0"
       pausedonstart="false"
       loop="false"
       volume="1.0"
       onvideoready=""
       onvideoplay=""
       onvideopaused=""
       onvideocomplete=""
       onerror=""
       />

2、3D扭曲热点视频: 
<hotspot name="video"
         url.flash="videoplayer.swf"
         url.html5="videoplayer.js"
         videourl="video.m4v|video.webm"
         posterurl="videoposter.jpg"
         ath="0.0" atv="0.0"
         distorted="true"
         scale="1.0" 
         rx="0.0" 
         ry="0.0" 
         rz="0.0" 
         pausedonstart="false"
         loop="false"
         volume="1.0"
         directionalsound="true"
         range="90.0"
         rangefalloff="1.0"
         outofrangevolume="0.0"
         onvideoready=""
         onvideoplay=""
         onvideopaused=""
         onvideocomplete=""
         onerror=""
         />

3、作为全景视频: 
<plugin name="video"
        url.flash="videoplayer.swf"
        url.html5="videoplayer.js"
        videourl="video.m4v|video.webm"
        posterurl="videoposter.jpg"
        panovideo="true"
        pausedonstart="false"
        loop="false"
        volume="1.0"
        onvideoready=""
        onvideoplay=""
        onvideopaused=""
        onvideocomplete=""
        onerror=""
        />

<image hfov="360" vfov="180">
   <sphere url="plugin:video" />
</image>

1、普通layer形式插入视频: 
<layer name="video"
       url.flash="videoplayer.swf"
       url.html5="videoplayer.js"
       videourl="video.m4v|video.webm"
       posterurl="videoposter.jpg"
       align="center" x="0" y="0"
       pausedonstart="false"
       loop="false"
       volume="1.0"
       onvideoready=""
       onvideoplay=""
       onvideopaused=""
       onvideocomplete=""
       onerror=""
       />
 
2、3D扭曲热点视频: 
<hotspot name="video"
         url.flash="videoplayer.swf"
         url.html5="videoplayer.js"
         videourl="video.m4v|video.webm"
         posterurl="videoposter.jpg"
         ath="0.0" atv="0.0"
         distorted="true"
         scale="1.0" 
         rx="0.0" 
         ry="0.0" 
         rz="0.0" 
         pausedonstart="false"
         loop="false"
         volume="1.0"
         directionalsound="true"
         range="90.0"
         rangefalloff="1.0"
         outofrangevolume="0.0"
         onvideoready=""
         onvideoplay=""
         onvideopaused=""
         onvideocomplete=""
         onerror=""
         />
 
3、作为全景视频: 
<plugin name="video"
        url.flash="videoplayer.swf"
        url.html5="videoplayer.js"
        videourl="video.m4v|video.webm"
        posterurl="videoposter.jpg"
        panovideo="true"
        pausedonstart="false"
        loop="false"
        volume="1.0"
        onvideoready=""
        onvideoplay=""
        onvideopaused=""
        onvideocomplete=""
        onerror=""
        />
 
<image hfov="360" vfov="180">
   <sphere url="plugin:video" />
</image>

插件属性：

•videourl[字符型]
    •视频文件路径.
    •由于flashplayer与html5分别有不同格式支持播放，所以需要了解不同的格式类型属性，实现更兼容的播放.
    •全部已支持格式如下:
        ◦MPEG4 / H264 (.mp4, .m4v, .mov) - Flashplayer / Firefox (Windows 7+) / Safari / Chrome / IE / iOS / Android
        ◦WebM (.webm) - Firefox / Chrome
        ◦Ogg Theora (.ogg, .ogv) - Firefox / Chrome
        ◦Flash Video (.flv, .f4v) - Flashplayer only
        ◦RTMP Video Streaming (rtmp:// urls) - Flashplayer only
        ◦HTTP Live Streaming (.m3u, .m3u8) - iOS, Mac Safari only - and only for <layer> usage, 暂未支持全景视频直播!
 
    •可以设置分隔符 | 同时设置多种格式的视频文件.
    •格式从左到右适应，先从左边格式找起，如果不支持，再向右找下一种格式，videourl="video.mp4|video.webm".
    •官方建议设置一个基线MP4和一个WebM文件,可以适应大部分播放需求，领主tips:一般设置一个合格mp4即可.
    •建议使用设备实测您所需播放的格式实际播放是否支持，不同设备可能会有不同效果.
    •视频只在flash模式下支持透明通道.
    •当视频被加载,videourl将被绝对路径替代.
    • HTML5移动设备注意-mp4可以支持大多数移动设备，但还是有些设备操作系统不一定支持，保证mp4是h264编码将支持更多播放适配. 
    •iPhone注意ios10版本前 - 需要增加.m4a (HE-AAC) or .mp3作为声音文件，否则适配播放没声音. 领主tips:现在已很少底版ios设备，所以这个可以忽略.
     样例: videourl="video.mp4|video.webm|video-iphone-audio.m4a"
    
•posterurl[字符型] 
//视频海报封面图片地址
 
•panovideo[布尔型] 
//默认false,设置是否设为全景视频类型
 
•pausedonstart[布尔型] 
//默认false,设置是否启动时暂停播放，不支持ios,ios不能自动播放
 
•loop[布尔型] 
//默认false,是否循环播放
 
•volume[数字型] 
//视频音量设置，0-1,默认1.0，不支持ios
 
•muted[布尔型] 
//设置是否消声，默认false
 
•playbackrate[数字型] 
//回放速度，默认1.0, 0.5是慢速，2.0是快速
 
•directionalsound[布尔型] 
//默认false,是否设置环绕声
 
•range[数字型] ，默认90
//声音播放范围
 
rangefalloff[数字型] 
//声音偏移范围，默认1.0
 
outofrangevolume[数字型] 
//超出范围时音量，默认0
 
•preferredformat[字符型] 
//当同时设置多种格式时，可以人为设置优先播放格式，也可以指定浏览器，如：
preferredformat.firefox="webm"
 
•autopause[布尔型] 
//默认false，视频层隐藏时，是否自动暂停播放
 
autoresume[布尔型] 
//默认false,视频层重新显示时，是否恢复播放
 
•html5controls[布尔型,只支持html5]
//是否显示浏览器默认的播放条控件，默认false(领主tips：很多手机检测到mp4后，会显示一些原生播放控件)
 
•html5preload[字符型,只支持html5] 
//默认auto,设置视频预加载
 
•buffertime[数字型，只支持flash] 
//播放前的缓冲时间，默认0.1
 
•ignoremetadata[布尔型] 
//默认false,设置是否忽略元数据
 
•playsinline[布尔型] 
//默认true,默认在krpano内播放，设置false，则会有可能在移动设备或浏览器规定的原生播放器内播放.
 
•iphoneworkarounds[布尔型，只支持html5] 
//默认true，设置是否ios全屏自动播放，还是允许非全屏layer内播放
 
•touchworkarounds[布尔型只支持html5] 
//默认true，设置是否允许点一下屏幕触发播放，设置为false则必须设置play按钮通过播放动作触发.

插件事件：

• onvideoready
//设置当视频已准备好播放时执行的动作，该属性执行即表示已可以获取视频大小和视频时长.
 
• onvideoplay
//设置当视频开始播放时执行的动作
 
• onvideopaused
//设置当视频被暂停时执行的动作
 
• onvideocomplete
//设置视频播放完成后执行的动作，领主tips:当然loop当然不能是true，否则没完没了，该属性不执行
 
• onerror
//播放过程发生错误时执行的动作，当该属性被设置，将取代默认的报错信息输出
 
• onneedtouch
//当被设置为需要点击屏幕才播放时执行的动作，领主tips:很多时候移动设备上播视频一片黑，用户不知道需要点击屏幕，这属性刚好用来设置显示播放按钮或提示
 
• ongottouch
//该属性相对上一属性，当点击了之后执行

插件状态属性：

• isvideoready [布尔型]
//获取视频是否准备好播放状态，默认false

• ispaused [布尔型]
//当前是否被暂停状态，默认false

• isseeking [布尔型]
//当前是否正在寻轨跳转,默认false

• iscomplete [布尔型]
//当前是否播放完成,默认false

• isautopaused [布尔型]
//当前是否被浏览器其他时间暂停，默认false

• needtouch [布尔型]
//当前是否需要点击才能播放,默认false

• videoerror [布尔型]
//输出视频出错信息，当onerror顺序被设置，即输出客户自定信息

• time [数字型]
//输出当前视频播放时间点

• totaltime [数字型]
//输出当前视频总时长

• videowidth [整型]
//输出当前视频宽度

• videoheight [整型]
//输出当前视频高度

• loadedbytes [整型]
//已经读取视频的字节数

• totalbytesv [整型]
//视频总字节数

插件动作：

playvideo(url, posterurl, pausedonstart, starttime)
•播放视频的动作.
•另外正在播放视频将被停止和关闭.
 
参数:
   •url
    ◦视频路径.
 
   •posterurl(可选)
    ◦海报图片路径.
    ◦建议使用高分辨率海报!
    ◦flash不支持海报.
 
   •pausedonstart(可选)
    ◦是否加载后自动播放.
 
   •starttime(可选)
    ◦设置视频开始播放的时间点.
    ◦只支持HTML5.
 
•play()
 
   ◦播放或恢复一个暂停视频.
 
•pause()
 
   ◦暂停视频播放.
 
•togglepause()
 
   ◦切换视频暂停和恢复状态动作.
 
•stop()
 
   ◦停止视频，重新播放会从头开始.
 
•seek(time)
 
   ◦寻轨到指定时间点播放.
   ◦取决于视频编码（编码和帧间隔）视频将寻求“近”的位置.
 
参数:
   ◦time
    //跳到的时间
   ◦可设置为设置秒数.
   ◦或者百分比 (0% - 100%).

部分参考：必学智库