这里介绍一个强大的HTML5的视频播放器 VideoJS ，VideoJS是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放，下面直接看应用代码。

调试代码：

<!doctype html>
<!-- 
 * 内核: videojs
 * 归属: 360模板吧
 * 网址: www.360mb.net
 * 创建: Dora - 2021.07.29
 * 修改: Dora - 2021.07.29
-->
<html>
	<head>
	<meta charset="utf-8">
	<title>Video.js 7.4.1 play hls-m3u8 video</title>
	<link href="https://cdn.jsdelivr.net/npm/video.js@7.14.3/dist/video-js.min.css" rel="stylesheet">
	<style>
body {
	background-color: #191919
}
.m {
	width: 960px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
}
</style>
	</head>

	<body>
    <div class="m">
      <video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
		  poster="m.jpg" data-setup="{}">
        <source src="https://cctvtxyh5ca.liveplay.myqcloud.com/live/cctv13_2/index.m3u8" type="application/x-mpegURL">
        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
      </video>
      <script src="https://cdn.jsdelivr.net/npm/video.js@7.14.3/dist/video.min.js"></script> 
    </div>
</body>
</html>

注：默认m3u8格式，其他格式注意请参考下面的说明

视频格式：

<source src="/shipin.m3u8" type="application/x-mpegURL">
<source src="/shipin.mp4" type="video/mp4">
<source src="/shipin.webm" type="video/webm">
<source src="/shipin.ogv" type="video/ogg">

语言选择：

引入中文插件即可，其他语言可查看源码中的“dist/lang/”文件夹

https://cdn.jsdelivr.net/npm/video.js@7.17.0/dist/lang/zh-CN.js

注：播放格式代码中以注释，也可参考下面的“视频格式控制”，播放器内核版本为最新的video.js 7.14.3，其中js和css文件调用的CDN文件，有需要的自行下载到本地！

皮肤样式：

Videojs皮肤生成器 Videojs Skin Generator：Videojs皮肤生成器

实际运用：

在实际运用中，由于Videojs默认框架的限制，如果我们需要默认全屏可使用下面的代码，本代码已做翻译处理，节目，界面按钮为中文，如有疑问可在评论区提交！

隐藏内容
本内容需权限查看
  • 注册用户: 2积分
  • VIP会员: 1积分5折
  • 永久会员: 免费
已有4人解锁查看
1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定，不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益，请联系我们进行处理。