OpenTok Api在网页中播放视频
OpenTok Api Broadcasted video placement in web page
我使用opentok并连接到广播服务,并在页面底部获得flash播放器的对象。
我如何把它放在一个特定的div..
这是我用来连接到opentol API的代码
function initiatecall() {
if (session != undefined) {
if (!iscalled) {
session.addEventListener("sessionConnected", sessionConnectedHandler);
session.addEventListener("streamCreated", streamCreatedHandler);
session.connect("21457612", token_id); // Replace with your API key and token. See https://dashboard.tokbox.com/projects
// and https://dashboard.tokbox.com/projects
iscalled = true;
$.ajax({
data: '{"ChatId":"' + chat_id + '","NurseId":"' + nurse_id + '","DeviceType":"Browser"}',
type: "POST",
dataType: "json",
contentType: "application/json;charset=utf-8",
url: "someurl.asmx/MakeCall",
success: function (data) { initiatecall(chat_id, session_id, token_id); },
eror: function (a, b, c) { alert(a.responseText); }
});
}
} else {
alert("Session Expired!!");
}
}
function sessionConnectedHandler(event) {
subscribeToStreams(event.streams);
session.publish();
}
function streamCreatedHandler(event) {
subscribeToStreams(event.streams);
}
function subscribeToStreams(streams) {
for (i = 0; i < streams.length; i++) {
var stream = streams[i];
if (stream.connection.connectionId != session.connection.connectionId) {
session.subscribe(stream);
}
}
}
function exceptionHandler(event) {
alert("Exception: " + event.code + "::" + event.message);
}
</script>
<!--End of code-->
<!--Signal R-->
<script type="text/javascript">
$(function () {
//$.hubConnection.app.MapHubs(new HubConfiguration { EnableCrossDomain = true });
// Proxy created on the fly
var chat = $.connection.chat
//var chat = $.connection.WebPushNotification;
//alert(chat);
// Start the connection
// $.connection.hub.start();
//port 1935
$.connection.hub.start({ transport: 'auto' }, function () {
//alert('connected');
$("#info").append("<br/>Hub Started..");
initiatecall();
$("#info").append("<br/>Call Initiated..");
chat.send(chat_id + ',' + session_id + ',' + token_id + ',' + '<%=Session["UserId"].ToString() %>');
$("#info").append("<br/>Broadcasted Message..");
//$('#MainContent_connected').text('Connected to chat room');
});
// Declare a function on the chat hub so the server can invoke it
chat.addMessage = function (message) {
//alert(message);
//$('#messages').append('<li>' + message + '</li>');
};
});
</script>
我用div来显示所有的进度。
<div id="info">
</div>
它连接到我的视频并请求许可,但它占据了自己的位置,而不是根据我的设计。
我认为你应该添加参数replaceElementId
,并将其值设置为div的id,该id应该替换为玩家。示例:如果你想在#containerdiv中加载播放器,你可以在#container中定义一个div #replaceElementId,它将被替换为player:
<div id="container">
<div id="replaceElementId"></div>
</div>
您必须包含将在DOM中替换的元素的ID(这里例如replaceElementId)
<div id="container">
<div id="replaceElementId"></div>
</div>
修改会话。subscribe
function subscribeToStreams(streams) {
for (i = 0; i < streams.length; i++) {
var stream = streams[i];
if (stream.connection.connectionId != session.connection.connectionId) {
//This is where you have to make changes
//session.subscribe(stream);
session.subscribe(stream, "replaceElementId",
{ width:640, height:480 } );
}
}
}
正如你所看到的,你甚至可以定义自己的视频流大小或其他GUI更改。
更多信息请参见官方文档TokBox API:Session相关文章:
- 在移动设备中自动播放视频
- Twitter Boostrap:模式窗口在重新播放模式窗口后不播放视频
- 可以't从peerConnection Connection播放视频
- 在一天中的某个时间自动在我的网站上播放视频
- 如何使用videojs开始播放视频时不显示字幕
- 鼠标悬停时播放视频/鼠标悬停时显示缩略图
- jwplayer seek()和onTime()来播放视频片段
- 噩梦与YouTube API和播放视频工作
- 使用MediaSource扩展播放视频播放列表
- Jwplayer可以'不要在Chrome中播放视频
- 使用Javascript在黑莓设备上播放视频
- video.js,播放视频,但在IE10上没有声音
- 在播放视频时调整屏幕大小
- youtube API播放视频、pauseVideo和stopVideo不工作
- 滚动播放视频,但只能播放一次
- 在安卓设备上使用html5播放视频
- 使用jquery循环播放视频
- 播放视频时如何隐藏标题
- 如何在 HTML 中播放视频
- 通过脚本播放视频在安卓上不起作用