简易本地网页文件播放电视

 有的网址有Access-Control-Allow-Origin问题，我用的火狐浏览器添加的插件“CORS Unblock“。

需要同目录有hls.js  vue.js文件,把下边代码保存成xx.htm,拖入浏览器就可以看电视直播流。

<script src="hls.js"></script>
<script src="vue.min.js"></script>

<video id="videoElement" height=580 width=960 controls ></video>
<br><br>
<input type="text"  id="tvu" />
<input type="button" id="dakai" onclick="dakai(tvu.value)" value="打开"/>

<div id="app">
<ol>
<li v-for="t in tvurl">
<button v-on:click="dakai(t.u)" >{{t.t}}</button><br><br>
</li>
</ol>
</div>
<script>    
var video = document.getElementById('videoElement');   

function dakai(url){
var hls = new window.Hls()
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, function () {
   video.play()
   })
   hls.loadSource(url)
}



new Vue({
  el: '#app',
  data: {
    tvurl:[{t:'凤凰',u:"https://playtv-live.ifeng.com/live/06OLEEWQKN4_tv1.m3u8"},
    {t:'香港',u:'http://zhibo.hkstv.tv/livestream/mutfysrq/playlist.m3u8'},
     {t:'浙江',u:'http://hw-m-l.cztv.com/channels/lantian/channel01/1080p.m3u8'},
     {t:'浙江公共',u:'http://hw-m-l.cztv.com/channels/lantian/channel07/1080p.m3u8'},
    {t:'大爱2',u:'https://pulltv2.wanfudaluye.com/live/tv2.m3u8'},
     {t:'俄罗斯',u:'https://brics.bonus-tv.ru/cdn/brics/chinese/tracks-v1a1/mono.m3u8'},
     {t:'原住民',u:'http://streamipcf.akamaized.net/live/_definst_/live_720/chunklist_b1500.m3u8'},
     {t:'ndt',u:'https://ntd02.akamaized.net/NTDA/tracks-v4a1/mono.m3u8'},
     {t:'自然',u:'http://bamus-eng-roku.amagi.tv/playlist720lp.m3u8'},
      {t:'ViuTVsix',u:'https://cdn.hklive.tv/xxxx/96/index.m3u8'},
        {t:'ViuTV',u:'https://cdn.hklive.tv/xxxx/99/index.m3u8'},
    
    ]
  }
})    
</script>

刚开始用IPTVnator看电视，启动太慢，就自己弄了个简单网页文件。iptv-org/iptv 简介: 收录全球 8000 多个 IPTV 网络直播源。 - GitHub中文社区

 

第二版

<style type="text/css">
  .button {
    padding: 10px 0;
    margin: 20;
    font-size: 18px;
    color: #000;
    border-radius: 25px;
    height: 25px;
    width: 100px;
    border: 0px;
    background-color: #eee;
    box-shadow: 0 8px 16px #888;
    outline: none;
  }

  body {
    padding: 0 0
  }

  @media only screen and (min-width: 500px) {
    body {
      padding: 0 200px
    }
  }
</style>


<script src="/static/js/hls.js"></script>
<script src="/static/js/flv.js"></script>
<script src="/static/js/vue.min.js"></script>


<div>
  <video width=100% id="videoElement" controls></video>
  <br><br>
  <input type="text" id="tvu" />
  <input type="button" id="dakai" onclick="dakai(tvu.value)" value="打开" /><br><br>
</div>
<div id="app">

  <div v-for="(v,k,i) in tvurl" style="display:inline-block">

    <div class="button" v-on:click="dakai(v)">{% raw %}{{k}}{% endraw %}</div>
  </div>
</div>


</div>
<script>
  var video = document.getElementById('videoElement');
  var flvPlayer = null
  function dakai(url) {
    if (url.endsWith("flv")) {
      if (flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }



      flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: url
      });
      flvPlayer.attachMediaElement(video);
      flvPlayer.load();
      flvPlayer.play();
    }
    else {
      if (flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
      var hls = new window.Hls()
      hls.attachMedia(video)
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play()
      })

      hls.loadSource(url)
    }
  }



  tv = {
    '凤凰': "http://www.cietv.com/fhzw.m3u8",
    凤凰中文: 'http://www.cietv.com/fhzx.m3u8',
    香港: 'http://zhibo.hkstv.tv/livestream/mutfysrq/playlist.m3u8',
    浙江: 'http://hw-m-l.cztv.com/channels/lantian/channel01/1080p.m3u8',
    河北农民: 'https://event.pull.hebtv.com/jishi/nongminpindao.m3u8',
    保定: 'http://live.bdgdw.com/channel1/sd/live.m3u8?_upt=743267691684327305',
    俄罗斯: 'https://brics.bonus-tv.ru/cdn/brics/chinese/tracks-v1a1/mono.m3u8',
    ndt: 'https://ntd02.akamaized.net/NTDA/tracks-v4a1/mono.m3u8',
    大爱2: 'https://pulltv2.wanfudaluye.com/live/tv2.m3u8',
  }


  j = {
    cctv1: 'cctv1',
    cctv2: 'cctv2',
    河北: 'hebws',
    湖南: 'hnws'
  }

  vm = new Vue({
    el: '#app',
    data: { tvurl: Object.assign(tv, j) }
  })

  cdns = "http://www.baidu.com.cdns.cfd/url/?id=";
  pms = []
  t = []
  for (let i in j) {
    pms.push(fetch(cdns + j[i]));
    t.push(i);
  }
  Promise.all(pms).then(a => a.forEach((b, i) => { vm.tvurl[t[i]] = b.url.substr(37) }))


  window.onload = () => dakai(vm.tvurl['凤凰'])
</script>