文章目录[隐藏]

这里介绍一个强大的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="/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积分
  • 会员1积分5折
  • 永久会员免费推荐

发表回复

后才能评论

本站部分资源需要解压密码,如需解压密码,解压密码则为“www.360mb.net”,如密码还是错误请联系客服。

本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,如需技术支持需支付技术服务费100+/次,请大家谅解!

本站源码已经购买的后续都是免费更新,且资源更新都是在同一文章,不会新开一贴,不会重新收费,这一点我们和其他很多同行网站规则都不一样,望各位知晓!

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。