Videojs HTML5视频播放器开发实例-砝码网

Videojs HTML5视频播放器开发实例

这里介绍一个强大的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默认框架的限制,如果我们需要默认全屏可使用下面的代码,本代码已做翻译处理,节目,界面按钮为中文,如有疑问可在评论区提交!

隐藏内容

本内容需权限查看
  • 注册用户: 2积分
  • VIP会员: 1积分5折
  • 永久会员: 免费
已有4人解锁查看

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享