插件说明：
- •用于插入视频到全景中的功能插件
- •通过<layer>插入视频,
- •通过 <hotspot>插入视频,
- •作为全景视频，设置<image>为全景视频参数.
语法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
•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按钮通过播放动作触发. |
插件事件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
• onvideoready //设置当视频已准备好播放时执行的动作，该属性执行即表示已可以获取视频大小和视频时长. • onvideoplay //设置当视频开始播放时执行的动作 • onvideopaused //设置当视频被暂停时执行的动作 • onvideocomplete //设置视频播放完成后执行的动作，领主tips:当然loop当然不能是true，否则没完没了，该属性不执行 • onerror //播放过程发生错误时执行的动作，当该属性被设置，将取代默认的报错信息输出 • onneedtouch //当被设置为需要点击屏幕才播放时执行的动作，领主tips:很多时候移动设备上播视频一片黑，用户不知道需要点击屏幕，这属性刚好用来设置显示播放按钮或提示 • ongottouch //该属性相对上一属性，当点击了之后执行 |
插件状态属性：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
• isvideoready [布尔型] //获取视频是否准备好播放状态，默认false • ispaused [布尔型] //当前是否被暂停状态，默认false • isseeking [布尔型] //当前是否正在寻轨跳转,默认false • iscomplete [布尔型] //当前是否播放完成,默认false • isautopaused [布尔型] //当前是否被浏览器其他时间暂停，默认false • needtouch [布尔型] //当前是否需要点击才能播放,默认false • videoerror [布尔型] //输出视频出错信息，当onerror顺序被设置，即输出客户自定信息 • time [数字型] //输出当前视频播放时间点 • totaltime [数字型] //输出当前视频总时长 • videowidth [整型] //输出当前视频宽度 • videoheight [整型] //输出当前视频高度 • loadedbytes [整型] //已经读取视频的字节数 • totalbytesv [整型] //视频总字节数 |
插件动作：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
playvideo(url, posterurl, pausedonstart, starttime) •播放视频的动作. •另外正在播放视频将被停止和关闭. 参数: •url ◦视频路径. •posterurl(可选) ◦海报图片路径. ◦建议使用高分辨率海报! ◦flash不支持海报. •pausedonstart(可选) ◦是否加载后自动播放. •starttime(可选) ◦设置视频开始播放的时间点. ◦只支持HTML5. •play() ◦播放或恢复一个暂停视频. •pause() ◦暂停视频播放. •togglepause() ◦切换视频暂停和恢复状态动作. •stop() ◦停止视频，重新播放会从头开始. •seek(time) ◦寻轨到指定时间点播放. ◦取决于视频编码（编码和帧间隔）视频将寻求“近”的位置. 参数: ◦time //跳到的时间 ◦可设置为设置秒数. ◦或者百分比 (0% - 100%). |
![krpano实现转到特定角度出现图片案例[非会员文章]](https://victu360.com/wp-content/themes/vfilmtime/timthumb.php?src=http://victu360.com/ad/autoang.gif&h=280&w=506&zc=1)
