网页前端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. Java基础00-异常25

    1. 异常 异常 1.1 异常概述 1.2 JVM的默认处理方案 有一行代码报错,下面的代码就不会执行. 1.3 异常处理 如果程序出现了异常,需要我们自己来处理,因为在实际的开发中,不能因为一处的报 ...

  2. python基础之多线程的操作

    # 多线程实例# 例1.单线程from time import sleep,ctimedef task1(taskName): for i in range(2): print("正在执行 ...

  3. 将py文件打包成exe文件

    PyInstaller工具是跨平台的,它既可以在 Windows平台上使用,也可以在 Mac OS X 平台上运行.在不同的平台上使用 PyInstaller 工具的方法是一样的,它们支持的选项也是一 ...

  4. odoo前后端交互详解

    为了简单叙述,暂时不考虑多个db的情况(主要是懒得说没有db或者多个db实例的情况)当odoo指定数据库开启服务时(也就是odoo-bin -d <some_db_name> ),我们使用 ...

  5. 利用C++11可变模板，封装调用dll导出函数

    起因 开发中经常需要动态调用一些导出函数,试着利用C++11特性封装一下 尝试 常规使用 typedef int WINAPI (*TMessageBoxA)(HWND hWnd,LPCSTR lpT ...

  6. ts 学习笔记 - 进阶篇 1

    目录 进阶 类型别名 字符串字面量类型 元祖 例子 越界的元素 枚举 手动赋值 常数项和计算所得项 常数枚举 外部枚举 进阶 类型别名 类型别名用来给一个类型起个新名字 type Name = str ...

  7. dotnet 是 前30个增长最快速度的开源项目中排名第一的开发平台

    CNCF 的博客 发了一篇文章 <Update on CNCF and Open Source Project Velocity 2020>,中文翻译参见 2020年CNCF和开源项目开发 ...

  8. Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 （有数据保护）2021年7月29日 - Copy

    Synology群晖100TB万兆文件云服务器NAS存储池类别 RAID 6 (有数据保护)2021年7月29日 - Copy https://www.autoahk.com/archives/367 ...

  9. Qt-可编辑的ListView

    新建一个QML项目, main.cpp不动如下: #include <QGuiApplication> #include <QQmlApplicationEngine> int ...

  10. Python中print()函数的用法

    print()函数用于打印输出 1.函数语法: print(values,sep=' ',end='\n') sep和end是print()函数常用参数 参数sep是一次打印多个元素时的间隔符号,默认 ...