WEB视频自适应（下）

最新推荐文章于 2024-09-02 17:42:08 发布

itbrand

最新推荐文章于 2024-09-02 17:42:08 发布

阅读量3.4k

点赞数

分类专栏： video 文章标签： javascript 视频处理 html5 css3 web

本文链接：https://blog.youkuaiyun.com/itbrand/article/details/108864240

版权

本文介绍了多种H5视频播放器组件，如video.js、ckplayer、百度云cyberplayer、阿里云Web播放器和腾讯云Web播放器等，详细讲解了它们的特性和使用方法，帮助开发者实现视频自适应、个性化和多样化功能。同时，提到了web视频使用时的注意事项，包括视频格式选择、云服务和移动端播放兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决了web视频自适应和黑边的问题后，可能还想页面上的视频更加个性化，比如视频封面、视频LOGO、跑马灯、视频广告、弹幕等,网上有很多H5页面视频播放器组件，比如，video.js、ckplayer、酷播云、BAT云厂商的视频播放器Web-SDK等。
一、H5视频播放器
1、video.js
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器，拥有数百个皮肤和插件，自定义扩展很方便。
官方网址：https://videojs.com/
github地址：https://github.com/videojs/video.js
video.js使用方法：
(1)下载解压文件后，直接将css和js文件放置项目相应目录下，或者直接在页面</head>前引入CDN文件，如下：

<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/video-js.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/video.min.js"></script>
<style>
.video-box {
    
   width: 100%;
   margin: 0 auto;
}
</style>

(2)将下面代码放置在DIV容器中：

<div class="video-box">
<video
    id="my-player"
    class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class

最低0.47元/天解锁文章