VideoJs 不在浏览器和设备上播放

Question

我使用 video.js 为视频播放器编写了一个应用程序，但是当我点击播放时它没有播放。

我尝试在浏览器上进行检查，我看到了这个错误：

未捕获的类型错误：提供的元素或 ID 无效。 （视频） 在 videojs (video.js:21689)

然后当我检查时 (video.js:21689) 我有这个：

if (!tag || !tag.nodeName) { // re: nodeName, 也可以是box div throw new TypeError('提供的元素或 ID 无效。(videojs)'); // 返回 }

<link href="https://vjs.zencdn.net/5.10.2/video-js.css" rel="stylesheet">

@if(strstr($media->mime_type, "video/"))
<div  oncontextmenu=”return false;”>
    <video controls controlsList="nodownload"  id="videoElementID" playsinline>
        <source   src="{{str_replace('http://localhost:8000','http://example.com/public',$media->getUrl())}}" type="video/mp4" >
    </video>


</div>




@elseif(strstr($media->mime_type, "audio/"))
 <div style="magin:0 auto;">
    <audio  controls controlsList="nodownload"  style="width:100%;">
        <source src="{{str_replace('http://localhost:8000','http://example.com/public',$media->getUrl())}}" type="audio/mp3">
    </audio>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/5.10.2/video.js"></script>
<script src="//cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>

<script type="text/javascript">

const player = videojs('vid1', {});
document.addEventListener('contextmenu', event => event.preventDefault());
            function takeTest() {
            $('.lectureArea').hide();
                    $('.testMarker').hide();
                    $('.testArea').show();
            }

            $(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});
</script>

我希望视频在我点击时播放，但没有发生

Answer 1

你需要传递视频控制ID

const player = videojs('videoElementID', {});