m3u8格式视频源列表[通俗易懂]

m3u8格式视频源列表[通俗易懂]平时,需要测试m3u8格式视频的播放,会使用一些可用的播放源,整理在这里:constsourceList=[{name:’cctv1′,src:’http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8′},{name:’cctv2′,src:’http://ivi.bupt.edu.cn/hls/cc…

大家好,又见面了,我是你们的朋友全栈君。

平时,需要测试m3u8格式视频的播放,会使用一些可用的播放源,整理在这里:

      const sourceList = [
        { name: 'cctv1', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8' },
        { name: 'cctv2', src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8' },
        { name: 'CCTV3高清', src: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8' },
        { name: 'CCTV4高清', src: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8' },
        { name: 'CCTV5+高清', src: 'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8' },
        { name: 'CCTV6高清', src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8' },
        { name: 'CCTV7高清', src: 'http://ivi.bupt.edu.cn/hls/cctv7.m3u8' },
        { name: 'CCTV-8高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8' },
        { name: 'CCTV-9高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv9.m3u8' },
        { name: 'CCTV-10高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv10.m3u8' },
        { name: 'CCTV-11高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv11.m3u8' },
        { name: 'CCTV-12高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv12.m3u8' },
        { name: 'CCTV-13高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8' },
        { name: 'CCTV-14高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv14.m3u8' },
        { name: 'CCTV-15高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv15.m3u8' },
        { name: 'CHC高清电影 ', src: 'http://ivi.bupt.edu.cn/hls/chchd.m3u8' },
        { name: '北京卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8' },
        { name: '北京文艺高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8' },
        { name: '湖南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8' },
        { name: '浙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/zjhd.m3u8' },
        { name: '江苏卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/jshd.m3u8' },
        { name: '东方卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8' },
        { name: '安徽卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/ahhd.m3u8' },
        { name: '黑龙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hljhd.m3u8' },
        { name: '辽宁卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/lnhd.m3u8' },
        { name: '深圳卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/szhd.m3u8' },
        { name: '广东卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8' },
        { name: '天津卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/tjhd.m3u8' },
        { name: '湖北卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hbhd.m3u8' },
        { name: '东南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/sdhd.m3u8' },
        { name: '北京纪实高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8' },

        //
        { name: '民视新闻台 ', src: 'https://6.mms.vlog.xuite.net/hls/ftvtv/index.m3u8' },
        // 上面为可用的

      ];

同时,我也写了一个可以用来播放的html页面,代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <!--<link rel="stylesheet" href="./video.css">-->
    <!--<script src="./video.js"></script>-->
    <!--<script src="./videojs-contrib-hls.js"></script>-->
    <link href="./min/video-js.min.css" rel="stylesheet">
    <script src="./min/video.min.js"></script>
    <script src="./min/videojs-contrib-hls.min.js"></script>
    <style>
        #sourcelist {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="sourcelist" ></div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="600" height="500" data-setup='{}'>
    <source
        id="source"
        type="application/x-mpegURL"
    >
</video>
<div id="title"></div>
<video id="videoorigin" src="http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8" autoplay controls/>
<!--src="http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8"-->
<!--src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"-->
<!--src="http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8"-->
<!--src="http://12.99.105.147:12307/group1/M00/00/2D/L2FS2lvW7I6AX_39AAAA0v7Hglw26.m3u8"-->
</body>
<script>
  videojs.options.autoplay = true;
    // var node=document.createElement("LI");
//    var textnode= document.createTextNode("myVideo");
//    node.appendChild(textnode);
//    document.getElementById("myList").appendChild(node);


  // videojs 简单使用
  console.log(videojs);
  var source = document.getElementById('source');
  var sourcelist = document.getElementById('sourcelist');
  var title = document.getElementById('title');
  var videoorigin = document.getElementById('videoorigin');
  const src = 'blob:https://videojs.com/81d8956c-195a-4476-9bd6-bb274093c598';
  source.setAttribute('src', src);
  var myVideo = videojs('myVideo',{
    bigPlayButton : true,
//    controlBar : true,
    textTrackDisplay : false,
    posterImage: false,
    errorDisplay : false,
    playbackRates: [0.5, 1, 1.5, 2]
  });
  myVideo.play(); // 视频播放
  myVideo.pause(); // 视频暂停


//    function changeSource(src) {
//    }

    function showSourceList() {
      const sourceList = [
        { name: 'cctv1', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8' },
        { name: 'cctv2', src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8' },
        { name: 'CCTV3高清', src: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8' },
        { name: 'CCTV4高清', src: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8' },
        { name: 'CCTV5+高清', src: 'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8' },
        { name: 'CCTV6高清', src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8' },
        { name: 'CCTV7高清', src: 'http://ivi.bupt.edu.cn/hls/cctv7.m3u8' },
        { name: 'CCTV-8高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8' },
        { name: 'CCTV-9高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv9.m3u8' },
        { name: 'CCTV-10高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv10.m3u8' },
        { name: 'CCTV-11高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv11.m3u8' },
        { name: 'CCTV-12高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv12.m3u8' },
        { name: 'CCTV-13高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8' },
        { name: 'CCTV-14高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv14.m3u8' },
        { name: 'CCTV-15高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv15.m3u8' },
        { name: 'CHC高清电影 ', src: 'http://ivi.bupt.edu.cn/hls/chchd.m3u8' },
        { name: '北京卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8' },
        { name: '北京文艺高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8' },
        { name: '湖南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8' },
        { name: '浙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/zjhd.m3u8' },
        { name: '江苏卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/jshd.m3u8' },
        { name: '东方卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8' },
        { name: '安徽卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/ahhd.m3u8' },
        { name: '黑龙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hljhd.m3u8' },
        { name: '辽宁卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/lnhd.m3u8' },
        { name: '深圳卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/szhd.m3u8' },
        { name: '广东卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8' },
        { name: '天津卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/tjhd.m3u8' },
        { name: '湖北卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hbhd.m3u8' },
        { name: '东南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/sdhd.m3u8' },
        { name: '北京纪实高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8' },

        //
        { name: '民视新闻台 ', src: 'https://6.mms.vlog.xuite.net/hls/ftvtv/index.m3u8' },
        // 上面为可用的

      ];

      const list = [];
      sourceList.map(item => {
        var sourceListDiv = document.createElement('button');
        sourceListDiv.id = item.src;
        sourceListDiv.name = item.name;
        sourceListDiv.innerText = item.name;
//        sourceListDiv.setAttribute("onclick", "changeSource(" + item.src + ")");
        sourceListDiv.onclick = () => {
          source.setAttribute('src', item.src);
          console.log('change:', item.src);


//          myVideo.setSource(item.src); // 视频播放
//          myVideo.setAttribute('src', item.src); // 视频播放
          myVideo.src({
            src: item.src,
            type: 'application/x-mpegURL',
            withCredentials: true
          });
          videoorigin.setAttribute('src', item.src);
          title.innerText = item.name;
          myVideo.load(); // 视频播放
          myVideo.play();
          myVideo.pause(); // 视频暂停
        };
        console.log(sourcelist);
        sourcelist.appendChild(sourceListDiv);
//        list.push(sourceListDiv)
      });
    }
    showSourceList();
</script>
</html>

其中需要引入的文件是video.min.js、video-js.min.css、videojs-contrib-hls.min.js文件,就可以进行播放视频了在这里插入图片描述
效果如下所示:
在这里插入图片描述


播放插件地址:https://videojs.com/getting-started/#customize

代码地址:代码地址

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148744.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • j2ee java是什么意思,j2ee是什么

    j2ee java是什么意思,j2ee是什么熟悉Java的人有很多,但对于j2ee,很多人估计都是次听说了。那么这个j2ee是什么呢?它和Java有着什么千丝万缕的联系呢?1、j2ee是什么?要想知道j2ee是什么,必须先知道Java的三大分支。Java分为三个体系,分别为JavaSE(标准版),JavaEE(企业版),JavaME(微型版)这样看来的话,j2ee是属于java三大分支的一个。j2ee是一套全然不同于传统应用开发的技术架…

    2022年10月11日
  • django自定义用户认证_编写一个自定义异常类

    django自定义用户认证_编写一个自定义异常类前言如果我们不用使用drf那套认证规则,我们想自定义认证类,那么我们首先要知道,drf本身是如何定义认证规则的,也就是要查看它的源码是如何写的源码分析源码的入口在APIView.py文件下的di

  • python七夕表白代码(转载)_情人节图片唯美浪漫

    python七夕表白代码(转载)_情人节图片唯美浪漫七夕,最浪漫的Python代码送给陷入爱河的Python男同胞image.gif​三句话情书,我们听过。如何用python写一段浪漫的代码?可以是简短有韵味的情书式,也欢迎冗长而效果拔群的万行代码,我这在下面例举一些,还有其它思路的欢迎补充。千万千万别用代码表白,因为Python已经告诉你了:’she’isnot’yours’True千万别用Python表白,实在太扎心了:七夕,最浪漫的Py…

  • 一个Python小白5个小时爬虫经历

    一个Python小白5个小时爬虫经历前言最近业余在做一个基于.NETCore的搜索项目,奈何基层代码写好了,没有看起来很华丽的数据供测试。很巧的也是博客搜索,于是乎想到了博客园。C#也能做做页面数据抓取的,不过在博客园看到的大部分都

  • ARMv9刷屏——号称十年最大变革,Realm机密计算技术有什么亮点?

    ARMv9刷屏——号称十年最大变革,Realm机密计算技术有什么亮点?作者/乾越编辑/芹菜出品/云巅论剑ARMv9的新闻刷屏了。ARMv9号称十年以来最重大变革,因此让我们看下ARMv9中机密计算相关的新特性Realm。(注:本文是对IntroducingtheConfidentialComputeArchitecture的部分翻译和个人注解,本文图均来自anandtech.com网站。)背景在过去的几年里,我们看到安全问题和硬件安全漏洞已经成为了新闻热点。许多处理器侧信道漏洞,如幽灵、熔毁以及与它们有关的侧通道攻击,都表明…

  • goland 激活码[最新免费获取]

    (goland 激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~S32PGH0SQB-eyJsaWNlbnNlSWQiOi…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号