网页前端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]_CSS普通菜单制作

    简单给大家介绍一下CSS普通菜单制作,先看图 功能很简单 UL制作菜单 鼠标进入LI的CSS伪类,实现菜单弹出效果 源码如下 <!DOCTYPE html> <html> &l ...

  2. Python_结合Re正则模块爬虫

    ##### 爬取古诗文import reimport requestsdef parse_page(url): headers = { 'User-Agent':'Mozilla/5.0 (Windo ...

  3. 微信小程序云开发-云函数-创建云函数

    一.检查云函数环境 检查云函数环境时候,鼠标右键点击查看当前环境.如果存在多个云开发环境,要确保云函数的当前环境要与app.js中evn的环境值一致. 如果不一致,则鼠标右键切换当前云开发环境.(如果 ...

  4. 如何修改product.product的display_name的显示,解决_rec_name失效的问题

    回顾学习 之前有讲解过display_name是怎么由来的,odoo会去取_rec_name的值,会将_rec_name的值赋值给display_name. class FandxProduct(mo ...

  5. P2476-记忆化搜索

    链接 DP? 我们看看,这个状态似乎有亿点点多. 我们看看数据范围,数量不超过5,颜色数不超过15. 15维DP显然不靠谱. 那么我们就思考一下--个数? 记忆化搜索可ac: #include< ...

  6. 前端基础js（四）

    一. js [1] html:用于显示页面 [2] css:用于描述页面的样式 [3] javaScript:用于描述页面的行为 二.js中三大部分内容 [1] 基本语法:函数.对象.事件类型(变量, ...

  7. 消息队列 折腾ActiveMQ时遇到的问题和解决方法

    1.先讲严重的:服务挂掉. 这得从ActiveMQ的储存机制说起.在通常的情况下,非持久化消息是存储在内存中的,持久化消息是存储在文件中的,它们的最大限制在配置文件的<systemUsage&g ...

  8. Gitlab-500错误的恢复

    一.问题截图 二.定位问题 2.1.查看状态 # 查看状态 gitlab-ctl status # 如图发现gitaly 是down的状态 2.2.查看日志 # 查看日志 gitlab-ctl tai ...

  9. 在 CentOS 7.5 64位上使用 yum 安装 MySQL 8.0

    前段时间在 CentOS 7.5 64位上安装 MySQL 8.0.查了些资料,在这里记录一下详细的安装和设置步骤. 一.安装 使用yum安装MySQL之前需要先下载对应的.rpm文件,下载方法: 去 ...

  10. Python - dict 字典的多种遍历方式

    前置知识 for 循环详解:https://www.cnblogs.com/poloyy/p/15087053.html 使用 for key in dict 遍历字典 可以使用 for key in ...