video.js怎么设置视频的大小

  • 原创
  • |
  • 浏览： 11304
  • |
  • 更新：
  • |
  • 标签： JAVASCRIPT
分步阅读

video.js是一个通用的在网页上嵌入视频播放器的 JS 库。它支持HTML5和Flash视频，以及YouTube和Vimeo（通过插件）。它支持在台式机和移动设备上播放视频。

工具/原料

方法/步骤

  1. 1

    video.js 支持很多自定义设置视频大小的方式，一种就是在Video标签直接为width、height属性赋值，效果如图

    video.js怎么设置视频的大小
    video.js怎么设置视频的大小
  2. 2

    除了设置width、height以外还需要在Video标签添加data-setup属性并赋值默认值

    video.js怎么设置视频的大小
    video.js怎么设置视频的大小
  3. 3

    第二种设置视频的大小的方式，就是在data-setup里面添加videoWidth和videoHeight属性，并赋值想要设置的大小

    video.js怎么设置视频的大小
    video.js怎么设置视频的大小
  4. 4

    Video.js 的data-setup属性还提供了自适应的功能，只需要在data-setup里面设置fluid 为true即打开了视频自适应大小功能

    video.js怎么设置视频的大小
    video.js怎么设置视频的大小
  5. 5

    Video.js还支持用视频宽高比来设置视频大小，只需要在data-setup属性里面添加aspectRatio 属性，并赋值16:9或者4:3等宽高比

    video.js怎么设置视频的大小
    video.js怎么设置视频的大小
  6. 6

    Video.js的videoWidth和videoHeight属性 优先级比aspectRatio 高，所有当两个属性同时存在的时候，aspectRatio 的配置将会失效

    video.js怎么设置视频的大小
    video.js怎么设置视频的大小
    END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明： 本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部
相关标签 JAVASCRIPT