学做网站培训课程介绍

当前位置:

网站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>

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

《“网站Video标签播放大视频卡顿解决方法(m3u8流媒体)”》 有 1 条评论

  1. 学习建网站学员 斗牛士网络说道:

    很好的方法,找了很久就你这个方法有用,谢谢

发表评论

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

相关教程

  • 近期有几个学做网站学员咨询为什么自己服务器宝塔面板安装了WORDPRESS程序之后,网站总是打不开,提示500错误或者404错误。即使上传一个TXT文件,也无
  • 以下是帝国CMS模板制作详细步骤:第一步:使用仿站小工具下载页面,后缀使用html第二步:将下载下来的static文件夹上传到空间安装的程序根目录下的s
  • 现在很多网站都安装了SSL证书来实现加密访问,SSL证书一般是申请后可以使用一年,一年到期后再次申请重新布署。但有些站长会遇到这样的情况,网站旧
  • WordPress程序里的某个PHP文件,如果想连接数据库,一般需要填写数据库名、数据库用户、密码等信息,如下:<?php$conn=mysqli_connect(&qu
  • 我们做网站一般都是做自适应结构,不同用户使用不同的浏览设备可以浏览不同的版面的网站。但有时为了特殊的要求,我们不希望自己的网站手机端自适应,
  • 我们制作网站前台提交发布界面时,富文本编辑器常常使用kindeditor 编辑器,kindeditor 编辑器支持用户上传图片和附件,通常情况下编辑器是不限制附件
  • notepad是一款比较好用的网页编辑软件,学建站网张启亚老师也一直在用notepad。notepad有一个比较实用的功能就是它会自动保存之前打开的文件列表,但
  • 在PHP中,数组是一种非常常见且重要的数据类型。在使用数组时,通常需要不断地向数组中添加新的元素,以满足我们的需求。那么,在PHP中,如何向已有数
  • 网站中的滑动选择开关是比较常见的开关选择器,方便用户可以打开或者关闭某个参数。效果如下图:下面分享一下网站中的滑动选择开关的制作代码:HTM
  • 网站打不开怎么办,网站打不开原因比较多,下面介绍几种常见的网站打不开的原因和解决方法。1.先判断本地计算机是否可以正常连接网络,最简单的方法