HTML5<video>背景大视频响应式布局完美支持

壹间show

于 2014-08-20 01:46:54 发布

阅读量6.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： demo 响应式设计 CSS3 HTML5 文章标签： HTML5video背景视频 videojs 客户端判断检测响应式布局 Css3动画

本文链接：https://blog.youkuaiyun.com/xpf_show/article/details/38695883

本文介绍了如何使用HTML5的<video>标签创建响应式的背景大视频，并结合VideoJS库进行播放控制。通过设置JavaScript和CSS3动画，实现网页加载时的完美播放效果，同时提供客户端检测和适应不同设备的布局。

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

首先在这里我们知道<video>是

<script src="video.js" type="text/javascript" charset="utf-8">script>  
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS">

之后，你将添加一些Javascript来触发您的网页载入页面时VideoJS。这是可以做到的头，或在一个单独的JavaScript文件，只要它运行后VideoJS库包括在内。还有一个数字可以设置的选项，包括与其他方法的触发VideoJS，可以让你存储一个参考的球员，你可以稍后访问 jQuery插件。查看选项和设置方法，包括最新的球员名单自述文件一向上。
JavaScript Code复制内容到剪贴板
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
最后将你的视频路径和播放器嵌入到你的代码中

<video id="example_video_1" class="video-js" width="640" height="264" controls="controls"  
            preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">  
      <source src="http://video-js.zenc