我们正在构建一个带有 PhoneGap 和 OpenTok phonegap 插件的 iOS (iPad) 应用程序。但是,我们遇到了样式问题。实际的视频内容不会跨越通过 opentok 框架创建的对象元素的整个宽度。我们正在将有关视频的明确尺寸参数传递给 opentok,但我们仍然遇到这个问题。
任何帮助将非常感激!
我无法重现您的错误,在我的带有 PhoneGap 插件的 iOS 设备上,一切正常。
这是我的javascript代码(在coffeescript中):
session = ""
publisher = ""
subscribeToStreams = (streams)->
for e in streams
if (e.connection.connectionId == session.connection.connectionId)
return
div = document.createElement('div')
div.setAttribute('id', 'stream' + e.streamId)
div.setAttribute('class', "streamElement")
document.body.appendChild( div )
session.subscribe(e, div.id, {width: 640, height:480})
window.OTGroupChat = (apiKey, sessionId, token) ->
publisher = TB.initPublisher(apiKey, "myPublisherDiv", {width: 320, height: 240})
session = TB.initSession(sessionId)
session.addEventListener 'sessionConnected', (event) ->
session.publish( publisher )
subscribeToStreams( event.streams )
session.addEventListener 'streamCreated', (event) ->
subscribeToStreams( event.streams )
session.connect( apiKey, token )
结果:发布者视图按预期显示为 320x240,订阅流按指定显示为 640x480。
然后我通过直接在控制台中输入来更改订阅流的高度:
$("object:last").height(100);
TB.updateViews();
订阅者流乖乖地调整到新的高度。
然后,我通过将对象元素的背景颜色设置为粉红色来测试实际视频内容是否小于对象元素的宽度。没有显示粉红色,因此实际的 OpenTok 视频大于或等于对象元素的尺寸。当我给对象元素一个大小为 1 的粉红色边框时,视频周围有一个 1px 的粉红色轮廓,表明对象元素肯定与视频大小相同。
如果我误解了你,你指的是视频两边的黑条,恐怕这是 OpenTok 保持纵横比的方式,用户试图从他们的 iOS 设备流式传输纵向视图时经常会遇到视频周围的背条.