网页前端video播放m3u8(HLS)

HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术，包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。

开源JS库（Github）：

【video.js】https://github.com/videojs/videojs-contrib-hls【hls.js】https://github.com/video-dev/hls.js/

腾讯视频SDK（TCPlayerLite），文档地址：https://cloud.tencent.com/document/product/881/20207

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>videojs-contrib-hls embed</title>

  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">

  <script src="https://unpkg.com/video.js/dist/video.js"></script>

  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

</head>

<body>

  <h1>Video.js Example Embed</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"

  data-setup='{}'>

    <source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">

  </video>

  <script>

  </script>

</body>

</html>

注：可以指定多个source标签。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>前端播放m3u8格式视频</title>

    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">

    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>

    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->

</head>

<body>

    <style>

        .video-js .vjs-tech {position: relative !important;}

    </style>

    <div>

        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>

            <source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source>

        </video>

    </div>

    <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>

</body>

<script>

    // videojs 简单使用

    var myVideo = videojs('myVideo', {

        bigPlayButton: true,

        textTrackDisplay: false,

        posterImage: false,

        errorDisplay: false,

    })

    myVideo.play()

    var changeVideo = function (vdoSrc) {

        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式

            myVideo.src({

                src: vdoSrc,

                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值

            })

        } else {

            myVideo.src(vdoSrc)

        }

        myVideo.load();

        myVideo.play();

    }

    var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8';

    document.querySelector('.qiehuan').addEventListener('click', function () {

        changeVideo(src);

    })

</script>

网页前端video播放m3u8(HLS)的更多相关文章

  1. ffplay 播放m3u8 hls Failed to open segment of playlist 0

    用ffplay 播放m3u8文件 出现 Failed to open segment of playlist 0,Error when loading first segment 'test0.ts' ...

  2. 前端播放m3u8格式视频

    一.前端播放m3u8格式视频 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars ...

  3. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  4. 流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...

  5. vue中通过hls.js播放m3u8格式的视频

    近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取m3u8的视频这里就不在叙述了,只说一下怎么将m3u8格式的视频成功播放 一.m3u8和HLS介绍 1.M3U8文件是指UTF-8编码格式的 ...

  6. 关于大视频video播放的问题以及解决方案（m3u8的播放）

    在HTML5里,提供了<video>标签,可以直接播放视频,video的使用很简单: <video width="320" height="240&qu ...

  7. 【Android】 修复ijkPlayer进行m3u8 hls流播放时seek进度条拖动不准确的问题

    项目中使用的播放器是ijkPlayer,发现播放切片特点的hls流(m3u8格式的视频)拖动seekBar的时候会莫名的跳转或者seek不到准确的位置,发现网友也遇到了同样的问题,ijk的开发者也说明 ...

  8. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  9. IOS（苹果手机）使用video播放HLS流，实现在内部播放及全屏播放（即非全屏和全屏播放）。

    需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...

随机推荐

  1. final修饰符(5)-final方法

    final修饰的类的方法不能被重写,例如如果父类不希望子类重写某个方法,则可以使用final修饰符修饰该方法 在java的Object类里面有一个final方法:getClass(),因为Java不希 ...

  2. 【论文阅读】Socially aware motion planning with deep reinforcement learning-annotated

    目录 摘要部分: I. Introduction 介绍 II. Background 背景 A. Collision Avoidance with DRL B. Characterization of ...

  3. 【动画消消乐】HTML+CSS 自定义加载动画 064（currentColor的妙用！）

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  4. springboot-5-持久层技术

    整合mybatis 流程: 导入依赖: 除了mybaits还有mysql和jdbc依赖 <!--mybatis--> <dependency> <groupId>o ...

  5. P6982 [NEERC2015]Jump

    P6982 [NEERC2015]Jump 题意 给你一个未知的 01 串,每次可以输出询问一个 01 串,如果该串中正确的个数刚好等于 \(n\) 或者 \(n/2\) ,将会返回相应的答案,否则会 ...

  6. Cesium加载地形数据只显示半个地球

    Cesium第0级地形包括两个瓦片:0/0/0.terrain,0/1/0.terrain,分别为左半球和右半球(具体参考:https://blog.csdn.net/u013929284/artic ...

  7. Python基础之PyQt5关闭界面

    想让执行完程序后自动关闭窗口,而不用点击右上角叉叉的方法是self.close(),具体应用还是以treewidget为例. 前面我们写了一个treewidget的界面,并且实现了界面代码分离,具体实 ...

  8. 最长公共子序列问题（LCS）——Python实现

      # 最长公共子序列问题 # 作用:求两个序列的最长公共子序列 # 输入:两个字符串数组:A和B # 输出:最长公共子序列的长度和序列 def LCS(A,B): print('输入字符串数组A', ...

  9. 右键发送 (sendto)，创建快捷方式到自定义的位置，不仅仅是复制，就像 发送到 桌面快捷方式 一样

    TL;DR 在 SendTo 文件夹里加上一文件夹的快捷方式后,在右键发送到这个文件夹的是这些文件的一个副本,实际上是一个复制的过程,有时候我们只希望是快捷方式,那就得另想办法了. 方案如下: 创建一 ...

  10. vue使用GraphVis开发无限拓展的关系图谱

    1.去GraphVis官网下载对应的js,新版和旧版的js有所不同,看自己需求引入旧版还是新版(GraphVis官方网址:http://www.graphvis.cn/) visgraph.min.j ...