网页开发设计

前端页面如何正常利用video.js播放m3u8格式的视频

video.js 播放m3u8格式视频背景

m3u8格式的视频是将文件分成一小段一小段的ts文件,播放完一个在播放下一个,由于每次请求的ts文件都很小,所以基本可以做到无延时播放。目前WEB上主流的直播方案主要是HLS和RTMP,移动端主要是HLS,PC端主要是RTMP。

前天也写过一篇关于wordpress如何播放m3u8格式视频的文章,没阅读过的可以参考一下:

[lxtx_fa_insert_post ids=8440">

HLS是苹果推出的,移动端不管是IOS还是Android都天然支持HLS协议,直接在h5页面直接配置即可使用;PC端只有safari浏览器支持,其他浏览器均不支持。

可以用video.js和videojs-contrib-hls.js。video.js是非常好用的插件

如何利用H5播放m3u8格式视频呢

第一步:调用JS与样式文件,参考代码如下:

<link rel="stylesheet" href="./video.css">
<script src="./video.js"></script>

第二步:BODY部分添加播放器接入代码:

    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>    
        <source id="source" src="./assets/video/1080.m3u8"  type="application/x-mpegURL">
    </video>

其中/assets/video/1080.m3u8即为m3u8视频路径地址;

第三步:script添加在页面的任意位置

<script>    
    // videojs 简单使用
    var myVideo = videojs('myVideo',{
        bigPlayButton : true, 
        textTrackDisplay : false, 
        posterImage: false,
        errorDisplay : false,
    })
    myVideo.play() // 视频播放
    myVideo.pause() // 视频暂停
</script>

对应的路径必须要有切片的ts文件;

(0)
【友情提示:】
1、[焦点热议]及其子栏目内容为网络转载,其它栏目内容系作者个人原创文章观点,不代表除作者外的任何第三方观点赞同或支持;
2、「♚付涛纪实阁♚」原创文章均为本人工作、学习过程中重点事项点的记录,便于日后面对相同问题时候的复盘总结,同时原创内容遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议由使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;
LensNews

评论:

1 条评论,访客:0 条,博主:0 条
  1. nongshaojie
    nongshaojie发布于: 

    厉害啊

发表评论