网页中播放mp4文件

最新推荐文章于 2025-01-10 10:17:51 发布

weifangseo

最新推荐文章于 2025-01-10 10:17:51 发布

阅读量7.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery html5 文章标签： videojs

本文链接：https://blog.youkuaiyun.com/weifangseo/article/details/39101597

本文介绍了在html5环境下，如何利用videojs这个jQuery插件简单实现网页中mp4视频的播放。通过引入videojs的js和css文件，并配置播放器的初始背景屏幕，可以方便地创建视频播放器。

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

最近给企业做了一个网站，为了宣传企业形象，录了很多宣传片。这就涉及到网站视频的播放，在html5时代，实现视频播放很简单，而且也有很多jquery插件可以更简洁的播放视频。
本文记录一下这次开发中使用的基于html5的videojs播放器，使用很简单，代码如下：
引用及定义
引用视频的js与css文件
videojs.options.flash.swf用来定义播放器的初始背景屏幕,默认为黑屏

<link href="video-js.css" rel="stylesheet" type="text/css">
  <script src="video.js"></script>
  <script>
    videojs.options.flash.swf = "video-js.swf";
  </script>

html5代码,官方demo中给定的代码，因为符合需求，只改了视频源和初始图片，其他的没改。
定义视频源属性source
定义初始图片 poster
width 定义播放器宽度
height 定义播放器高度
高度和宽度可以按百分比定义，用以支持