这里介绍一个强大的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"
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="https://www.360mb.net/shipin.m3u8" type="application/x-mpegURL">
<source src="https://www.360mb.net/shipin.mp4" type="video/mp4">
<source src="https://www.360mb.net/shipin.webm" type="video/webm">
<source src="https://www.360mb.net/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默认框架的限制,如果我们需要默认全屏可使用下面的代码,本代码已做翻译处理,节目,界面按钮为中文,如有疑问可在评论区提交!
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END