网站Video标签播放大视频卡顿解决方法（m3u8流媒体）
自从HTML5推出之后，网站上的视频可以像图片一样使用video标签直接播放了。但使用video播放视频有一个缺点就是只能播放小视频，如果视频比较大就会出现卡顿的问题。因为它需要先把视频加载完才会播放。
下面学做网站论坛就介绍一下网站Video标签播放大视频卡顿解决方法，就是将普通的MP4视频转成m3u8流媒体，然后再使用video标签进行播放。可以彻底解决Video标签播放大视频卡顿的问题了。
方法/步骤
第一步：将大的MP4视频转化m3u8流媒体视频格式。（转换方法见：网站MP4格式视频如何转为m3u8格式）
第二步：将转换后所有的m3u8后缀文件和ts后缀文件，全部上传到自己网站的根目录下；
第三步：下载m3u8流媒体播放必需的JS文件及CSS文件；下载地址：Video 标签播放m3u8流媒体视频示例代码
第四步：将下载的JS文件及CSS文件上传到自己的网站主机根目录下；
第五步：在自己网站的顶部模块</head>标签上面放上以下的代码，用于加载video.js和css；
|
1 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">"text/javascript"</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">"/js/jquery.js"</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span><br><span style="color: #339933;"><</span>link href<span style="color: #339933;">=</span><span style="color: #3366CC;">"/css/video-js.css"</span> rel<span style="color: #339933;">=</span><span style="color: #3366CC;">"stylesheet"</span> <span style="color: #339933;">/></span><br><span style="color: #339933;"><</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">"/js/videojs-ie8.min.js"</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span><br><span style="color: #339933;"><</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">"/js/videojs-contrib-hls.min.js"</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">"text/javascript"</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span></div></div> |
第六步：在需要播放视频的位置 ，使用以下的video代码来播放自己的m3u8格式视频。
|
1 2 3 |
<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap"><span style="color: #009900;"><video</span><br><span style="color: #009900;"><span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"my-video"</span></span><br><span style="color: #009900;"><span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"video-js"</span></span><br><span style="color: #009900;">controls</span><br><span style="color: #009900;">preload<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"auto"</span></span><br><span style="color: #009900;"><span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"1024"</span></span><br><span style="color: #009900;"><span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"768"</span></span><br><span style="color: #009900;">poster<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"MY_VIDEO_POSTER.jpg"</span></span><br><span style="color: #009900;">data-setup<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"{}"</span></span><br><span style="color: #009900;">></span><br><span style="color: #009900;"><source <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"m3u8视频路径"</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"application/x-mpegURL"</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"vjs-no-js"</span>></span><br> To view this video please enable JavaScript, and consider upgrading to a<br> web browser that<br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://videojs.com/html5-video-support/"</span> <span style="color: #000066;">target</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"_blank"</span></span><br><span style="color: #009900;">></span>supports HTML5 video<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span></span><br><span style="color: #009900;">></span><br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>></span><br><span style="color: #009900;"><<span style="color: #66cc66;">/</span>video></span><br><span style="color: #808080; font-style: italic;"><!-- 引入video.js文件 --></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://vjs.zencdn.net/7.10.2/video.min.js"</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>></span></div></div> |
这样就可以播放视频了，并且不会卡顿。
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 网站Video标签播放大视频卡顿解决方法（m3u8流媒体）
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 网站Video标签播放大视频卡顿解决方法（m3u8流媒体）
