如何通过React,JS-constructor(props)传递布尔值给html5视频控件属性 &

Question

class App extends React.Component {

constructor(props) {

// Calling super class constructor
super(props);

// Creating state
this.state ={
video.controls= true
}

}

render() {
return (

<div className= "container">
<video controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></source>
<p>Your browser doesn't support HTML5 video.</p>
</video>
</div>
);
} }
export default App;

Answer 1

首先，HTML5视频元素中的控件是一个布尔属性:

值"true"one_answers";false"不允许在布尔属性上使用。要表示假值，必须完全省略该属性。

所以当你查看它时，最终的HTML5要么有"控件"，要么没有。

(https://html.spec.whatwg.org/multipage/common-microsyntaxes.html # boolean-attributes)

从传递的属性设置它是这样的-例如使用钩子(没有测试过，但从类似的代码改编，我已经测试过，所以应该是大致正确的):

function InputVideo = (props) => {
const setControls = () => {
//Function to set controls
let vidElement = ref.current;
if (vidElement) {
vidElement.controls = props.controlsSetting;
}
};
useEffect (setControls, [props.controlsSetting]);
return(
<div className="video-wrapper">
<video className="video-area" ref={ref}>
<source src={props.source} type="video/mp4"/>
Your browser does not support the video tag.
</video>
</div>
)
});

对于您使用类的示例，我认为您正试图使控件属性仅在属性为真时才呈现，因此您可以使用以下内容:

{props.videoControlsBoolean ? <video controls> : <video>}

。如果你传入的videoControlsBoolean值为true，那么当你渲染它时，在视频标签中包含'controls'，如果不是，那么就不要。