返回官网

全景视频在HTML5下的支持

狒狒 2016-10-20 krpano全景 1604 次
这次1.18的最重要的更新当属全景视频在HTML5下的支持 。要在移动端(HTML5)观看全景视频,必须满足以下几个条件:


首先你必须更新到krpano的1.18版本。
其次你的系统也就是手机版本的内核要高。ios8.0或安卓4.4以上。在满足这两个系统的条件下。你还需要选择合适的浏览器。建议使用火狐浏览器(原生的可能看不了)。
当然,最后,你需要有真正的全景视频。


全景视频无非就是一个360*180的全景动态图像序列。当然从文件结构来说,图像序列与视频还是相差很大,但从人眼的角度来看,全景视频的用法其实是与一张普通的全景图没有什么区别的。假设我们现在有一个6000*3000分辨率的全景视频,实际上也就是相当于一张6000*3000的全景图。在我们制作漫游时,同样可以有热点有地图等等。那一个标准的krpano的全景视频xml文件是怎样的呢?




XML 用法案例


下面是可以播放一个全景视频的最基本最简单的xml结构。


<krpano> <!-- 嵌入视频插件 --> <plugin name="video" url.flash="videoplayer.swf" url.html5="videoplayer.js" videourl="video.mp4|video.webm" /> <!-- 定义全景图使其对应视频插件 --> <image> <sphere url="plugin:video" /> </image></krpano>


使用细节



视频文件自身的载入、播放、控制由krpano视频插件执行。




krpano viewer仅显示视频帧。




视频插件所指定的全景图由特殊的路径语法执行。

<image> <sphere url="name-of-the-videoplayer-plugin-element" /></image>

全景图The pano image可以是 <sphere> 或 <cylinder>图像(切片不允许) 。




通过定义hfov、vfov以及voffset,可以使用局部全景。




可以通过插件action来控制视频,例如动态控制任意视频的播放:

plugin[video].playvideo('video2.mp4|video2.webm');

可以使用UI界面来控制视频,该皮肤在下载包的'examples/videointerface/' 文件夹中。



下面附上新的视频插件文档



Videoplayer Plugin videoplayer.swf/videoplayer.js
Version 1.18
for Flash and HTML5


Videoplayer插件可用于在krpano内播放视频。

通过<layer>元素作为普通平面视频使用。
或者通过<hotspot>元素作为平面热点或三维变形热点使用。
或者通过<image>元素作为全景视频使用。


语法

作为屏幕上的平面元素使用:

<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" preferredformat="" buffertime="0.1" ignoremetadata="false" onvideoready="" onvideoplay="" onvideopaused="" onvideocomplete="" />

作为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" preferredformat="" buffertime="0.1" ignoremetadata="false" onvideoready="" onvideoplay="" onvideopaused="" onvideocomplete="" />


作为全景视频使用:

<plugin name="video" url.flash="videoplayer.swf" url.html5="videoplayer.js" videourl="video.m4v|video.webm" posterurl="videoposter.jpg" pausedonstart="false" loop="false" volume="1.0" preferredformat="" buffertime="0.1" ignoremetadata="false" volume="1.0" onvideoready="" onvideoplay="" onvideopaused="" onvideocomplete="" /><image hfov="360" vfov="180"> <sphere url="plugin:video" /></image>
插件属性


属性名 数值类型 默认值 
videourl String 
视频文件的路径。Flashplayer与HTML5浏览器对视频格式/编码的支持是不一样的。为了让视频可在所有系统所有浏览器上播放,需要提供多种格式的视频。支持的视频格式有:MPEG4 / H264 (.mp4, .m4v, .mov) - Flashplayer / Firefox (Windows 7+) / Safari / Chrome / IE / iOS / AndroidWebM (.webm) - Firefox / ChromeOgg Theora (.ogg, .ogv) - Firefox / ChromeFlash Video (.flv, .f4v) - Flashplayer onlyRTMP Video Streaming (rtmp:// urls) - 仅FlashplayerHTTP Live Streaming (.m3u, .m3u8) - 仅iOS, Mac Safari为了提供多个视频格式,让插件自行选择合适的格式,需要同时设定全部视频的路径,使用分隔符| 将它们分开。当支持所提供的多个格式的视频时,插件将按照从左至右的顺序选择视频。例如当支持MP4和WebM时,应该优先使用MP4,所以应写videourl="video.mp4|video.webm"。通过preferredformat 设置自定义优先使用的格式。至少要提供MP4和WebM视频,这两种视频格式应该可以在主流系统中使用。同时也考虑使用device checks for attributes将不同的视频指定到不同的设备中。支持具有透明通道的透明视频(仅Flash与VP6编码)。一旦有视频载入,则videourl属性的数值将会载入的视频的路径所替换。HTML5移动设备注意事项 - 大多数移动设备都支持MP4格式,但对MP4-profile-level 的支持取决于设备以及相应的iOS版本。Flash注意事项 -如果没有使用默认的krpanoembeddingscript嵌入krpano Flash viewer,则视频路径需要绝对路径或相对于根SWF文件的相对路径。 

属性名(仅HTML5) 数值类型 默认值 
posterurl String 
这是在视频载入之前或开始播放之前所显示的图像(通常为第一帧的截图)的路径。强烈推荐在移动设备上使用该设定。图像的宽高尺寸应该与视频相同。某些设备(例如部分iOS版本)需要将这个图像的尺寸作为视频的尺寸。 

属性名 数值类型 默认值 
pausedonstart Boolean false 
设定视频在开始时是否暂停。注意 - 在某些设备上(例如iOS),视频开始时总是暂停的。 

属性名 数值类型 默认值 
loop Boolean false 
设定视频在播放结束时是循环播放还是停止。 

属性名 数值类型 默认值 
volume Number 1.0 
视频声音的音量(0.0 - 1.0)注意 - 无法在iOS设备中控制视频的音量。 


属性名(仅Flash) 数值类型 默认值 
directionalsound Boolean false 
当视频作为热点播放时,使用具有方向性的3D声音。声像(左右声道音量)会根据热点位置和浏览方向自动进行调整。 

属性名(仅Flash) 数值类型 默认值 
rangerangefalloffoutofrangvolume NumberNumberNumber 90.01.00.0 
方向性声音的可听范围,从声音位置到浏览方向的距离,声音音量会在这个范围内从音量值降到outofrangevolume。rangefalloff定义音量下降曲线(例如0.01到10.0),默认为1.0。outofrangevolume设定声音超出范围时的音量。 

属性名(仅HTML5) 数值类型 默认值 
preferredformat String 
当同时可播放多个格式时,设定优先播放的视频格式。如果没有设置数值,则可用的视频格式按照从左至右的顺序选择。因此可以针对特定的浏览器优先使用特定的格式。例如针对火狐优先使用webm格式。preferredformat.firefox="webm" 

属性名(仅Flash) 数值类型 默认值 
buffertime Number 0.1 
在视频开始播放前,以秒为单位的视频预载入/缓冲时间,默认为0.1(也是Flash播放器默认值)。 

属性名(仅Flash) 数值类型 默认值 
ignoremetadata Boolean false 
默认情况下,视频插件使用存储在视频文件中的元数据尺寸信息来确定视频的分辨率。但某些视频和视频转换工具会在元数据存储了错误的尺寸信息,从而导致变形或错误尺寸的视频。使用这个设置,忽略/跳过元数据信息。 

插件事件

属性名 数值类型 默认值 
onvideoready Action Event 
当视频已准备就绪能够播放时响应该事件。在这个时间上,视频的frame size 以及播放长度(totaltime)都是可知的。如果在xml里没有设置插件尺寸(width,height),插件将会使用当前视频的像素尺寸重新调整自身的尺寸。 
属性名 数值类型 默认值 
onvideoplay Action Event 
当视频将开始播放时响应该事件。 


属性名 数值类型 默认值 
onvideopaused Action Event 
当视频将被暂停时响应该事件(通过pausedonstart=true在启动实现的暂停将被忽略)。HTML5注意 - 在HTML5下,当视频结束时也会响应该事件,响应于onvideocomplete 之前。 


属性名 数值类型 默认值 
onvideocomplete Action Event 
当视频完全结束播放时响应该事件。只有loop 设置为“false”时该事件才可能相应。 
插件状态属性(只读)

属性名 数值类型 默认值 
isvideoreadyispausedisseekingiswaitingiscomplete BooleanBooleanBooleanBooleanBoolean falsefalsefalsefalsefalse 
动态检查视频播放状态的变量:isvideoready - 检查视频已经准备好播放。ispaused - 检查视频当前是否暂停。查视check if the video is currently paused.isseeking - 检查视频当前是否正在定位。check if the video is currently seeking.iswaiting - 检查视频当前是否正在等待新数据(在这个时候,某些浏览器会暂停视频,因此这可以区分开用户造成的暂停与浏览器导致的强制性暂停)。iscomplete - 检查视频是否已经结束。 
属性名 数值类型 默认值 
timetotaltime NumberNumber 0.00.0 
播放时间信息:time - 以秒为单位的当前视频播放位置。totaltime - 以秒为单位的视频总长度。 

属性名 数值类型 默认值 
videowidthvideoheight intint 00 
源视频尺寸的像素大小。在onvideoready事件之后可用。 










属性名 数值类型 默认值 
loadedbytestotalbytes intint 00 
载入信息:loadedbytes - 当前已载入视频文件的字节。totalbytes - 视频文件的总字节。Flash注意 - 当视频解码时是以动态比特率进行时,已载入字节与已经播放的秒数不成正比例。HTML5注意 - 在HTML5下,是不可能确定真正的字节尺寸的。因此在HTML5下这是数值会表现为以秒为单位的当前缓冲数据量,即秒乘以1048576(=1024*1024, =1 MB)。 



插件动作

playvideo(url, posterurl, pausedonstart, starttime) 
打开一个新的视频路径并开始播放。当前播放的视频将会停止并关闭。参数:url视频文件路径。与videourl设置相同。posterurl(可选)贴图文件路径。与posterurl设置相同。贴图图像仅能在HTML5下使用,在Flash中该设定会被忽略。pausedonstart(可选)视频是否在开始时暂停。与pausedonstart设置相同。starttime设定视频开始时间。当视频准备好播放时,可用于直接定位到指定时间。仅支持HTML5。 


closevideo() 
停止视频并且关闭视频流。无法恢复或重新播放视频。 

stop() 
停止视频并且移动到第一帧,在第一帧暂停。通过play()动作可以恢复播放。 

pause() 
在当前帧暂停视频。通过play()动作可以恢复播放。 

play() 
恢复播放一个停止或暂停的视频。 

togglepause() 
暂停或恢复播放视频。 

seek(time) 
定位到指定的位置。参数time所指定的播放位置。可以以秒为单位。或者以百分比为单位(0% - 100%)。 




HTML5注意事项

iOS限制
对于ios设备(iPhone and iPad)有若干系统限制:

无法自动播放 / 自动开始!
在iOS上视频无法自动播放!
用户需要触摸/点击视频来开始载入并且播放视频。
当确定要播放视频,但会因为iOS而暂停,插件会自动选择第一个触碰到屏幕的操作来开始播放视频。


开始时没有视频预览也没有尺寸信息(iOS8.0之前)
只有在点击或触摸视频元素轴,视频才会开始载入,没有载入之前是没有任何视频像素信息以及可以显示的东西。如果不知道尺寸,那就没办法在全景中放置视频。
有三种解决办法:
1. 使用posterurl图像
图像尺寸将作为视频尺寸。
推荐使用该方法!
2. 在xml文件中手动定义视频尺寸(宽度/高度)。
视频图像会变黑。
3. 如果没有上述两种做法,则默认使用320*240的尺寸设置。




没有音量变化!
不允许在iOS设备上改变音量。




在iPhone上只能全屏播放视频
在iPhone上,视频一旦播放就会切换到全屏,点击停止时才会返回正常视角。




无法同步多个音频流或视频流
在iOS设备上,一次只允许播放一个视频或一个音频。也就是你无法叠加音频和视频同时播放。


更多信息:
苹果公司对于iOS特定说明的文档


已知的浏览器问题(更新状态:2014年9月)
下面是关于当前已知的浏览器问题列表,包含测试案例以及问题报告:


iOS 8 以及 Mac Safari 8 - WebGL跨域资源共享漏洞
因为这一漏洞,目前无法跨域载入其它域名下的全景视频!
测试案例:http://krpano.com/ios/bugs/ios8-webgl-video-cors/
问题报告:https://bugs.webkit.org/show_bug.cgi?id=135379


iOS 8 以及 Mac Safari 8 - 对于视频来说不好的WebGL表现
WebGL转换的视频图像太慢。
这种表现取决于视频帧的像素尺寸,视频文件的比特率与此无关 - 例如一个1024*512的视频就会比一个2048*1024的视频更流畅更快,因为需要在CPU和GPU之间传输的像素更少。
目前的解决办法是在iOS上使用更小的像素尺寸,直到苹果修复该问题。
测试案例:http://krpano.com/ios/bugs/ios8-webgl-video-performance
问题报告:https://bugs.webkit.org/show_bug.cgi?id=135387


iOS 8 - iPhone自动全屏播放
在iPhone上播放视频时,iPhone会切换到全屏播放七,因此就无法看到主 页面和内嵌视频。
测试案例:http://krpano.com/ios/bugs/ios8-webgl-video/
问题报告:
https://bugs.webkit.org/show_bug.cgi?id=134251
https://bugs.webkit.org/show_bug.cgi?id=133511#c7
https://code.google.com/p/chromium/issues/detail?id=395206#c14
注意 - krpano视频插件目前使用了一个“诡计”来使得iPhone上可以播放全景视频,但这个诡计并不能改善播放表现,只允许播放视频而无法播放音频。


Chrome (桌面) - 当使用硬件加速视频解码时会闪烁
在Chrome桌面浏览器播放全景视频时,在某些系统上有时候会出现烦人的闪烁。
可以通过在Chrome浏览器中输入下面url来屏蔽硬件加速视频解码
chrome://flags/#disable-accelerated-video-decode
激活对应的设定,然后重启Chrome。


Windows Phone - 不支持WebGL视频纹理
Windows Phone 8.x设备上的IE11支持WebGL但不支持将视频作为纹理。没有这种特性无法在这些设备上显示全景视频。


案例(包含在下载包中)
l 变形热点视频 (examples/plugin-examples/video-hotspot/)
l 内联视频播放器 (examples/plugin-examples/video-player/)
l 全景视频 (examples/videointerface/)

发表评论

Copyright © 2016 DEWEBSTUDIO