Video.js中锁定视频比例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- 引用video.js，并设置画面的纵横比 -->
<head>
  <link href="https://vjs.zencdn.net/8.9.0/video-js.css" rel="stylesheet" />
</head>

<body>
  <video
    id="my-video"
    class="video-js vjs-default-skin vjs-16-9"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="这里是视频封面"        
    data-setup="{}"
  >
    <source src="这里是视频链接" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">这里是视频描述<a href="这里是视频链接" target="_blank">这里是视频标题</a></p>
  </video>

  <script src="https://vjs.zencdn.net/8.9.0/video.min.js"></script>


  <script>
    // make a vertical video
    var player = videojs('my-video', {
        aspectRatio: '9:16'
    });
  </script>

  <!-- 引用video.js，并设置画面的纵横比 -->