我有一个按预期工作的自定义 HTMLElement，但我找不到将参数传递给构造函数的方法；相反，我正在访问在我的自定义标记中传递值，但随后我必须在 中设置值connectedCallback()，我对此并不满意。
这是我现在正在做的基本版本：
class TrackingPreview extends HTMLElement {
constructor() {
super();
const video = document.createElement('video');
video.setAttribute('controls', '');
video.setAttribute('width', '1920');
video.setAttribute('height', '1080');
shadow.appendChild(video);
this.video = video;
}
connectedCallback() {
const videoId = this.getAttribute('video-id');
this.video.id = videoId;
}
}
我宁愿将 videoId 直接传递给构造函数，就像这样（不起作用）：
JS：
class TrackingPreview extends HTMLElement {
constructor(videoId) {
super();
const video = document.createElement('video');
video.setAttribute('id', videoId);
video.setAttribute('controls', '');
video.setAttribute('width', '1920');
video.setAttribute('height', '1080');
shadow.appendChild(video);
}
connectedCallback() {
}
}
HTML 页面上的 JS 脚本：
$(document).ready(function(){
const tracking_preview = document.createElement('tracking-preview','{{video_id}}');
tracking_preview.videoId …我正在使用 Reactstrap，为了使某个卡片响应窗口的大小，我想用百分比而不是像素来修复它的纵横比。
出于某种原因，这适用于宽度但不适用于高度。 https://codepen.io/anon/pen/xpwOGL
第一行是问题。如果我将高度设置为一个常数，比如说height:"200px"，它会200px很好。如果我更改宽度 %，它将更改宽度以匹配。但出于某种原因， height % 只是没有做任何事情。
<Card style={{width:"80%", height:"60%"}}>
<Row className="no-gutters" style={{position: "absolute"}}>
<Col xs="auto">
<button>
Next image
</button>
</Col>
<Col xs="auto">
<button>
Previous image
</button>
</Col>
</Row>
</Card>
有没有一种不同的方式可以让我做出这种响应？
基本上，我的 django 应用程序需要在视图中创建一个图像，并将其传递给模板。这对字符串来说很容易，但我找不到用图像来做的方法。我已经阅读了许多堆栈溢出线程，但没有一个像我的那样，这令人惊讶。
我正在尝试这种变化作为我的观点：
视图.py：
def index(request):
while (True):
#video_capture = cv2.VideoCapture(0)
#ret, frame = video_capture.read()
img = "D:/Desktop/Tap/bsnsFaces.jpg"
frame = cv2.imread(img)
facesNumber ="Found {0} faces!".format(len(faces))
return render(request, 'result.html', {'p': facesNumber}, {'img': frame})`
末尾的{'img':frame}部分不在右边。我尝试了一些我在 SO 上找到的东西，但到目前为止没有任何效果。我知道图像是静态的，但最终我希望这是从网络摄像头捕获的帧，所以我无法通过使用模型来解决这个问题（或者我可以吗？）。
提前感谢您的任何建议！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Face detection with Django</title>
<p>{{ p }}</p>
<img src="data:image/jpg;base64, {{ img }}"></img>
</head>
<body>
</body>
</html>
我正在使用ReactJS中的视频播放器.基本上,我已经设置了一个基于cookie的介绍视频,它是可以跳过的.当它被跳过时,我希望我的主视频自动开始播放.我这样做的方式看起来像这样(问题在于setTimeout()部分,我知道这没有意义)
skipIntro() {
if (this.state.index === 0) {
this.handleVisit(MAX_COOKIES_INTRO);
this.setState({
index: ++this.state.index,
});
this.videoRef.updatePlaybackTime(0);
setTimeout(() => {
this.videoRef.play();
}, 0);
}
}
如果我不使用setTimeout,this.videoRef.play();则不执行.起初我以为是因为它是在主视频有时间加载之前被异步调用的.因为我等了0ms,我很困惑.为什么这样做？如果没有setTimeout调用,我真的更喜欢这样做.