网页前端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]_Spring IOC程序代码如何编写_第3讲

    第2讲我们介绍了Spring IOC的基本原理,这篇文章告诉大家Spring IOC程序代码是如何编写的,从而可以更好的理解IOC和DI的概念(所有的Java类的初始化工作扔给Spring框架,一个J ...

  2. 【LeetCode】1248. 统计「优美子数组」

    1248. 统计「优美子数组」 知识点:数组:前缀和: 题目描述 给你一个整数数组 nums 和一个整数 k. 如果某个 连续 子数组中恰好有 k 个奇数数字,我们就认为这个子数组是「优美子数组」. ...

  3. JDK的环境变量配置（详细步骤）

    JDK环境变量配置的步骤(Windows10) 一.下载并安装JDK 选择一个JDK版本下载并安装到电脑上. 二.环境变量的配置 1.安装完成JDK后的配置环境变量: 首先鼠标右击"计算机& ...

  4. sql-4-函数

    常见函数 1.运算函数 select ABS(-8) -- 绝对值 select ceiling(9.4) -- 向上取整 select floor(9.4) -- 向下取整 select rand( ...

  5. GCD SUM

    GCD SUM 求 \[\sum_{i=1}^n\sum_{j=1}^n\gcd(i,j) \] 将原式变换得到 \[\sum_{d=1}^nd\sum_{i=1}^{\lfloor\frac{n}{ ...

  6. 类似express的路由封装方式

    1.原理 主要过程涉及三个元素的定义,如下: //用于承载一系列方法的对象 var funObj = {}; //用于根据条件执行funObj中的方法 var app = function(){}; ...

  7. 使用Elastic Job的时候报“Job conflict with register center”，如何处理？

    昨天,有群友反应根据之前这篇<使用Elastic Job实现定时任务>文章编写测试定时任务的时候,报了类似下面的这个错误: Caused by: org.apache.shardingsp ...

  8. (Ooencv3)颜色空间转换

    (Ooencv3)颜色空间转换 opencv中有多种色彩空间,包括 RGB.HSI.HSL.HSV.HSB.YCrCb.CIE XYZ.CIE Lab8种,使用中经常要遇到色彩空间的转化,以便生成ma ...

  9. 大数据学习（05）——MapReduce/Yarn架构

    Hadoop1.x中的MapReduce MapReduce作为Hadoop最核心的两个组件之一,在1.0版本中就已经存在了.它包含这么几个角色: Client 多数情况下Client的作用就是向服务 ...

  10. Centos8 Nginx 开机自启配

    第一步:创建 service文件 vim /lib/systemd/system/nginx.service /lib 与 /usr/lib 我这里配置时是一样的,在那个文件夹配置都可以 第二步:编写 ...