我有一个动态显示流媒体视频（webrtc会议）的网页，为此，我还必须根据视频数量动态设置视频元素大小。
我意识到我的javascript代码只改变视频元素的大小一次（当我第一次应用它时）。或者可能是我做错了什么。因为它可以很好地工作，如果我硬编码的视频数量（只有html和js；没有webrtc）和js必须一次性设置大小。。我的webrtc代码在开始时总是一个视频，当它循环通过（当新视频出现时），那么我的代码就无法处理所有元素的大小。
我的代码：
// I have to reuse this code everytime I have to change size (properties) of all video tags in the document
function layout() {
for(var i=0;i<videoIds.length;i++){ // I've tried with ids
var localView = document.getElementById(videoIds[i]);
localView.setAttribute('position', 'relative');
localView.setAttribute('height', '50vh');
localView.setAttribute('width', '50vw');
localView.setAttribute('object-fit', 'cover');
}
var localView = document.getElementsByClassName('class'); // I've tried with class name
for(var i=0;i<localView.length;i++){
localView.setAttribute('position', 'relative');
localView.setAttribute('height', '50vh');
localView.setAttribute('width', '50vw');
localView.setAttribute('object-fit', 'cover');
}
var localView = document.getElementsByTagName('video'); // I've tried with tag name
for(var i=0;i<localView.length;i++){
localView.setAttribute('position', 'relative');
localView.setAttribute('height', '50vh');
localView.setAttribute('width', '50vw');
localView.setAttribute('object-fit', 'cover');
}
}我有什么遗漏吗？请帮忙。
是否有可能在再次调用代码时我的代码没有完成，或者跳过了一些代码。例子：
const initSelfStream = (id) => {
(async () => {
try {
await navigator.mediaDevices.getUserMedia(
{
//video: { facingMode: selectedCamera },
video: video_constraints,
audio: true
}).then(stream => {
const video = document.createElement("video");
loadAndShowVideoView(video, stream, localId);
});
} catch (err) {
console.log('(async () =>: ' + err);
}
})();
}
initSelfStream(id);
// Some Code
pc.ontrack(e){
const video = document.createElement("video");
loadAndShowVideoView(video, e.tracks[0], remoteId);
}
const loadAndShowVideoView = (video, stream, id) => {
if(totalUsers.length == 1){
console.log('Currently ' + totalUsers.length + ' User Are Connected.');
video.classList.add('video-inset', 'background-black');
video.setAttribute("id", id);
video.style.position = "absolute"
video.srcObject = stream;
video.style.height = 100+"vh"
video.style.width = 100+"vw"
video.muted = true;
video.style.objectFit = "cover"
appendVideo(video, stream);
} else if(totalUsers.length == 2){
// I add new video with desirable height & width
// Then call and run original function on the top with element number & condition
layout('8 videos', "size should be 25vh, 25vw");
}
}
const appendVideo = (video, stream) => {
container.append(video);
video.play()
}html非常简单。正文中包含视频的一个div：
<body>
<div class="views-container background-black" id="container"></div>
</body>
1条答案
按热度按时间w41d8nur1#
尝试组合所有样式属性。而不是：
你可以：
由于您已经使用了css类，您不必在您的条件下重复它，只需：
现在你可以改变了
width及height具有setAttribute.