0

I'm tring to use videojs in my web,but there are many unexpected situations. can someone help me? shown in figure enter image description here

Related code snippet:

<!DOCTYPE html>
<html>

<head>
    <script src="https://vjs.zencdn.net/7.5.5/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>

<body>
    <div style="background: #000000; height:500px;">
        <video id="my_video" 
               class="video-js" 
               controls 
               preload="auto" 
               width="100%" 
               height="100%" 
               data-setup="{}" 
               style="margin:0 auto; padding: 0 auto;">
            <source id="video_src" src="${sessionScope.currentLesson.getVideo_path() }" type="video/mp4" />
        </video>
    </div>
</body>
hasakeyi
  • 1
  • 1

2 Answers2

0

Use this code

<!DOCTYPE html> 
<html> 

<head>
  <link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  </video>

  <script src="https://vjs.zencdn.net/7.5.5/video.js"></script>
</body>
</html>
0

This is coming late, but for the sake of any other person experiencing this, all you need do is

import "video.js/dist/video-js.css";