Javascript Videojs不使用动态URL,但使用静态URL
我正在尝试在我的reactjs项目中实现videojs。我提供“src”的视频组件作为道具。“找不到此媒体的兼容源。”。下面是我的代码Javascript Videojs不使用动态URL,但使用静态URL,javascript,reactjs,video.js,Javascript,Reactjs,Video.js,我正在尝试在我的reactjs项目中实现videojs。我提供“src”的视频组件作为道具。“找不到此媒体的兼容源。”。下面是我的代码 initVideoJS = () => { let self = this; let that = this; const options = { fluid: true, preload: "auto", autoplay: false
initVideoJS = () => {
let self = this;
let that = this;
const options = {
fluid: true,
preload: "auto",
autoplay: false,
controls: true,
aspectRatio: "16:9",
loop: false,
// playVideo: false
}
myPlayer = videojs('video-el-p', options)
}
render () {
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{height: `${this.state.video_container_height}px`}}>
<div className="video-player">
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion && this.props.assetVersion.video.file} type="video/mp4"/>
Your browser does not support HTML5 video.
</video>
</div>
</section>
是一个有效的视频url。此url适用于普通html5视频组件。我做错了什么
p、 还有另一个videojs播放器实例在应用程序的其他页面中使用。但它有不同的id,所以我不认为这会影响它
我已经多次实现了videojs,但这是我第一次来讨论这个问题。提前谢谢 我认为问题在于视频源可能未定义,因为您使用的是有条件的
可能尝试仅在未定义视频src时渲染视频元素。它看起来像这样
render() {
let video;
if (this.props.assetVersion) {
video = (
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion.video.file} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
);
}
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{ height: `${this.state.video_container_height}px` }}>
<div className="video-player">
{video}
</div>
</section>
render(){
让视频;
如果(此.props.assetVersion){
视频=(
this.video_el=node}
className=“视频js视频el vjs以大播放为中心的vjs默认外观”
id=“video-el-p”循环={false}控件>
您的浏览器不支持HTML5视频。
);
}
返回(
{视频}
检查您是否对用于静态视频url的文件夹拥有阅读权限?是的,我有阅读权限。当我使用简单的html5视频元素时,一切正常。
render() {
let video;
if (this.props.assetVersion) {
video = (
<video onContextMenu="return false;"
ref={node => this.video_el = node}
className="video-js video-el vjs-big-play-centered vjs-default-skin"
id="video-el-p" loop={false} controls>
<source src={this.props.assetVersion.video.file} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
);
}
return (
<section className="assets-container-right" id="assets-container-right">
<div className="assets-container-wrapper">
<section className="video-container" id="video-container" style={{ height: `${this.state.video_container_height}px` }}>
<div className="video-player">
{video}
</div>
</section>