学做网站培训课程介绍

当前位置:

网站Video标签播放大视频卡顿解决方法(m3u8流媒体)

自从HTML5推出之后,网站上的视频可以像图片一样使用video标签直接播放了。但使用video播放视频有一个缺点就是只能播放小视频,如果视频比较大就会出现卡顿的问题。因为它需要先把视频加载完才会播放。

下面学做网站论坛就介绍一下网站Video标签播放大视频卡顿解决方法,就是将普通的MP4视频转成m3u8流媒体,然后再使用video标签进行播放。可以彻底解决Video标签播放大视频卡顿的问题了。

方法/步骤

第一步:将大的MP4视频转化m3u8流媒体视频格式。(转换方法见:网站MP4格式视频如何转为m3u8格式

网站Video标签播放大视频卡顿解决方法

第二步:将转换后所有的m3u8后缀文件和ts后缀文件,全部上传到自己网站的根目录下新建一个video文件夹里;

第三步:下载m3u8流媒体播放必需的JS文件及CSS文件;下载地址:Video 标签播放m3u8流媒体视频示例代码

Video 标签播放m3u8流媒体视频示例代码

第四步:将下载的JS文件及CSS文件上传到自己的网站主机根目录下;

第五步:在自己网站的顶部模块</head>标签上面放上以下的代码,用于加载video.js和css;


<script type="text/javascript" src="/js/jquery.js"></script>
<link href="/css/video-js.css" rel="stylesheet" />
<script src="/js/videojs-ie8.min.js"></script>
<script src="/js/videojs-contrib-hls.min.js" type="text/javascript"></script>

第六步:在需要播放视频的位置 ,使用以下的video代码来播放自己的m3u8格式视频。


<video
id="my-video"
class="video-js"
controls
preload="auto"
width="1024"
height="768"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="/video/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="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<!-- 引入video.js文件 -->
<script src="/js/video.min.js"></script>

这样就可以播放视频了,并且不会卡顿。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • Z-Blog是一款国内开发的网站程序,在开发过程中,我们怎么通过代码来判断文章所属的分类呢?可以通过以下的判断代码来实现。{if $article.Cat
  • 我们在做网站远程获取数据时,往往需要通过API接口来获取数据,在使用API接口之前,我们通常会使用PostMan软件来测试API是否正常。一些建网站新手不
  • 我们在本地环境下制作好网站之后,想把本地的网站搬家到互联网上,就需要将网站的程序和数据库导入到主机里。在使用阿里云主机导入数据库时,会出现这
  • 以前古文书籍的文字排序是从右到左,向上到下的排列。那么我们自己的网页上的文字也想像古文书籍那样排列,怎么实现呢?对于CSS3中已经有这样的属性来
  • 现在网站上的注册功能多种多样,有普通的注册登录功能,也有通过手机短信验证注册功能。下面学做网站论坛介绍一下怎么制作网站手机短信验证注册功能。
  • 怎么做网站?我们自己做网站时,都有一系列的流程步骤的。下面介绍一下网站制作详细步骤。网站制作详细步骤第一步:确定好自己的网站域名。在选择
  • 在前端制作过程中,会使用FORM表单来提交数据,FORM表单中有一个checkbox复选框,可以同时选择多个信息来传递。那么如何使用PHP来接收从FORM表单发送
  • 宝塔创建的网站,默认情况下让你填写的是域名,没有注明是ip,但在没有备案的情况下,无法使用域名来访问,我们可以直接使用ip地址来访问,来看看如何
  • 什么是CSS3 盒布局在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并
  • 对于一些网络小白想建立一个网站,最方便的方法就是通过开源CMS程序来建网站。省去了复杂的编程过程,准备一些建网站所需要的条件后就可以自己建立一