I wrote an app for Video Player using video.js, but its not playing when I clicked on play.
I tried to inspect on the browser and I saw this error:
Uncaught TypeError: The element or ID supplied is not valid. (videojs) at videojs (video.js:21689)
Then when I checked (video.js:21689) I have this:
if (!tag || !tag.nodeName) { // re: nodeName, could be a box div also throw new TypeError('The element or ID supplied is not valid. (videojs)'); // Returns }
<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>
I expect the video to play when I clicked but not happen
