Skip to content

基于Vue封装的Video.js播放器,支持HLS和RTMP直播流。

License

Notifications You must be signed in to change notification settings

wangdaodao/hrm-player

Repository files navigation

HRM-Player

NPM Publish NPM version GitHub stars GitHub issues GitHub forks

Install

NPM

npm i hrm-player --save

CDN

Get the latest version from unpkg.com/hrm-player or www.jsdelivr.com/package/npm/hrm-player , and import JavaScript and CSS file in your page.

<link rel="stylesheet" href="https://unpkg.com/hrm-player/dist/hrm-player.css">
<script src="https://unpkg.com/hrm-player/dist/hrm-player.umd.min.js"></script>

<!-- or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hrm-player/dist/hrm-player.css">
<script src="https://cdn.jsdelivr.net/npm/hrm-player/dist/hrm-player.umd.min.js"></script>

Quick Start

// main.js
import Vue from 'vue'
import App from './App.vue'

import 'hrm-player/dist/hrm-player.css'
import hrmPlayer from 'hrm-player'
Vue.use(hrmPlayer)
<template>
  <div id="app">
    <hrm-player :width="900" :height="500" :autoplay="true" :controls="true" ref="myPlayer" :source="src" type="rtmp/flv" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      src:"rtmp://58.200.131.2:1935/livetv/btv4"
    };
  }
};
</script>

Example

RTMP

<template>
  <div>
    <hrm-player :options="options" :source="src" type="rtmp/flv"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: {
        autoplay: true,
        controls: true,
        preload: "auto",
        width: 800,
        height:400,
      },
      src: "rtmp://58.200.131.2:1935/livetv/btv1"
    };
  }
};
</script>

HLS

<template>
  <div>
    <button @click="change(1)">央视1</button>
    <button @click="change(2)">央视2</button>
    <button @click="change(3)">央视3</button>
    <button @click="change(4)">央视4</button>
    <hrm-player :width="900" :height="500" :autoplay="true" :controls="true" :source="src"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: "",
    };
  },
  methods: {
    change(val){
      switch (val) {
        case 1:
          this.src = "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
          break;
        case 2:
          this.src = "http://ivi.bupt.edu.cn/hls/cctv2hd.m3u8"
          break;
        case 3:
          this.src = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8"
          break;
        case 4:
          this.src = "http://ivi.bupt.edu.cn/hls/cctv4hd.m3u8"
          break;
      }
    }
  }
};
</script>

Change type

<template>
  <div>
    <button @click="change(1)">RTMP</button>
    <button @click="change(2)">HLS</button>
    <button @click="change(3)">MP4</button>
    <hrm-player :width="900" :height="500" :muted="true" :autoplay="true" :controls="true" :source="src" :type="type" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: null,
      src: '',
    };
  },
  methods: {
    change(val){
      switch (val) {
        case 1:
          this.type = 'rtmp/flv';
          this.src = 'rtmp://58.200.131.2:1935/livetv/btv1';
          break;
        case 2:
          this.type = 'application/x-mpegURL';
          this.src = 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8';
          break;
        case 3:
          this.type = 'video/mp4';
          this.src = 'http://resource.wangdaodao.com/402670506.mp4';
          break;
      }
    }
  }
};
</script>

Attributes

Attribute Description Type Accepted Values Default
source source string
type type string video/mp4/rtmp/flv/application/x-mpegURL application/x-mpegURL
width width number 800
height height number 600
fluid Does the player scale to fit its container boolean false
poster Video cover string
muted muted boolean false
autoplay autoplay boolean true
controls controls boolean true
preload preload string auto/metadata/none auto
options Advanced settings will override the above settings Object

Notice:RTMP use online SWF address:https://vjs.zencdn.net/swf/5.4.2/video-js.swf, If replacement address, please revise options.flash.swf

More options, look VideoJS document

Events

Event Name Description Parameters
abort Fires when the loading of an audio/video is aborted. event
loadstart Fired when the user agent begins looking for media data event
loadeddata Fires when the browser has loaded the current frame of the audio/video. event
loadedmetadata Fires when the browser has loaded meta data for the audio/video. event
progress Fired while the user agent is downloading media data. event
pause Fired whenever the media has been paused event
play Triggered whenever an Tech#play event happens. Indicates that playback has started or resumed. event
ready Triggered when a Component is ready. event
volumechange Fires when the volume has been changed event
fullscreenchange fullscreen changed event

More events, look VideoJS event

Methods

Method Description Parameters
play play
pause pause
setFullScreen Full screen
reset reset
dispose dispose

Test address

Expand
# RTMP
CCTV-1综合: rtmp://58.200.131.2:1935/livetv/cctv1
CCTV-2财经: rtmp://58.200.131.2:1935/livetv/cctv2
CCTV-3综艺: rtmp://58.200.131.2:1935/livetv/cctv3
CCTV-4中文国际: rtmp://58.200.131.2:1935/livetv/cctv4
CCTV-5体育: rtmp://58.200.131.2:1935/livetv/cctv5
CCTV-6电影: rtmp://58.200.131.2:1935/livetv/cctv6
CCTV-7军事农业: rtmp://58.200.131.2:1935/livetv/cctv7
CCTV-8电视剧: rtmp://58.200.131.2:1935/livetv/cctv8
CCTV-9记录: rtmp://58.200.131.2:1935/livetv/cctv9
CCTV-10科教: rtmp://58.200.131.2:1935/livetv/cctv10
CCTV-11戏曲: rtmp://58.200.131.2:1935/livetv/cctv11
CCTV-12社会与法: rtmp://58.200.131.2:1935/livetv/cctv12
CCTV-13新闻: rtmp://58.200.131.2:1935/livetv/cctv13
CCTV-14少儿: rtmp://58.200.131.2:1935/livetv/cctv14
CCTV-15音乐: rtmp://58.200.131.2:1935/livetv/cctv15
安徽卫视: rtmp://58.200.131.2:1935/livetv/ahtv
兵团卫视: rtmp://58.200.131.2:1935/livetv/bttv
重庆卫视: rtmp://58.200.131.2:1935/livetv/cqtv
东方卫视: rtmp://58.200.131.2:1935/livetv/dftv
东南卫视: rtmp://58.200.131.2:1935/livetv/dntv
广东卫视: rtmp://58.200.131.2:1935/livetv/gdtv
广西卫视: rtmp://58.200.131.2:1935/livetv/gxtv
甘肃卫视: rtmp://58.200.131.2:1935/livetv/gstv
贵州卫视: rtmp://58.200.131.2:1935/livetv/gztv
湖北卫视: rtmp://58.200.131.2:1935/livetv/hbtv
湖南卫视: rtmp://58.200.131.2:1935/livetv/hunantv
河北卫视: rtmp://58.200.131.2:1935/livetv/hebtv
河南卫视: rtmp://58.200.131.2:1935/livetv/hntv
黑龙江卫视: rtmp://58.200.131.2:1935/livetv/hljtv
江苏卫视: rtmp://58.200.131.2:1935/livetv/jstv
江西卫视: rtmp://58.200.131.2:1935/livetv/jxtv
吉林卫视: rtmp://58.200.131.2:1935/livetv/jltv
辽宁卫视: rtmp://58.200.131.2:1935/livetv/lntv
内蒙古卫视: rtmp://58.200.131.2:1935/livetv/nmtv
宁夏卫视: rtmp://58.200.131.2:1935/livetv/nxtv
青海卫视: rtmp://58.200.131.2:1935/livetv/qhtv
四川卫视: rtmp://58.200.131.2:1935/livetv/sctv
山东卫视: rtmp://58.200.131.2:1935/livetv/sdtv
山西卫视: rtmp://58.200.131.2:1935/livetv/sxrtv
陕西卫视: rtmp://58.200.131.2:1935/livetv/sxtv
山东教育: rtmp://58.200.131.2:1935/livetv/sdetv
中国教育-1: rtmp://58.200.131.2:1935/livetv/cetv1
中国教育-3: rtmp://58.200.131.2:1935/livetv/cetv3
中国教育-4: rtmp://58.200.131.2:1935/livetv/cetv4
CCTV-第一剧场: rtmp://58.200.131.2:1935/livetv/dyjctv
CCTV-国防军事: rtmp://58.200.131.2:1935/livetv/gfjstv
CCTV-怀旧剧场: rtmp://58.200.131.2:1935/livetv/hjjctv
CCTV-风云剧场: rtmp://58.200.131.2:1935/livetv/fyjctv
CCTV-风云足球: rtmp://58.200.131.2:1935/livetv/fyzqtv
CCTV-风云音乐: rtmp://58.200.131.2:1935/livetv/fyyytv
CCTV-世界地理: rtmp://58.200.131.2:1935/livetv/sjdltv
CCTV-1HD: rtmp://58.200.131.2:1935/livetv/cctv1hd
CCTV-2HD: rtmp://58.200.131.2:1935/livetv/cctv2hd
CCTV-3HD: rtmp://58.200.131.2:1935/livetv/cctv3hd
CCTV-4HD: rtmp://58.200.131.2:1935/livetv/cctv4hd
CCTV-5HD: rtmp://58.200.131.2:1935/livetv/cctv5hd
CCTV5+HD: rtmp://58.200.131.2:1935/livetv/cctv5phd
CCTV-6HD: rtmp://58.200.131.2:1935/livetv/cctv6hd
CCTV-7HD: rtmp://58.200.131.2:1935/livetv/cctv7hd
CCTV-8HD: rtmp://58.200.131.2:1935/livetv/cctv8hd
CCTV-9HD: rtmp://58.200.131.2:1935/livetv/cctv9hd
CCTV-10HD: rtmp://58.200.131.2:1935/livetv/cctv10hd
CCTV-12HD: rtmp://58.200.131.2:1935/livetv/cctv12hd
CCTV-14HD: rtmp://58.200.131.2:1935/livetv/cctv14hd
CGTN-新闻: rtmp://58.200.131.2:1935/livetv/cctv16
CETV-1: rtmp://58.200.131.2:1935/livetv/cetv1
CETV-3: rtmp://58.200.131.2:1935/livetv/cetv3
CETV-4: rtmp://58.200.131.2:1935/livetv/cetv4
北京卫视高清: rtmp://58.200.131.2:1935/livetv/btv1hd
北京影视高清: rtmp://58.200.131.2:1935/livetv/btv4hd
北京体育高清: rtmp://58.200.131.2:1935/livetv/btv6hd
北京新闻高清: rtmp://58.200.131.2:1935/livetv/btv9hd
北京纪实高清: rtmp://58.200.131.2:1935/livetv/btv11hd
北京卫视: rtmp://58.200.131.2:1935/livetv/btv1
北京文艺: rtmp://58.200.131.2:1935/livetv/btv2
北京科教: rtmp://58.200.131.2:1935/livetv/btv3
北京影视: rtmp://58.200.131.2:1935/livetv/btv4
北京财经: rtmp://58.200.131.2:1935/livetv/btv5
北京体育: rtmp://58.200.131.2:1935/livetv/btv6
北京生活: rtmp://58.200.131.2:1935/livetv/btv7
北京青年: rtmp://58.200.131.2:1935/livetv/btv8
北京新闻: rtmp://58.200.131.2:1935/livetv/btv9
北京卡酷: rtmp://58.200.131.2:1935/livetv/btv10
北京文艺高清: rtmp://58.200.131.2:1935/livetv/btv2hd
安徽卫视高清: rtmp://58.200.131.2:1935/livetv/ahhd
重庆卫视高清: rtmp://58.200.131.2:1935/livetv/cqhd
东方卫视高清: rtmp://58.200.131.2:1935/livetv/dfhd
天津卫视高清: rtmp://58.200.131.2:1935/livetv/tjhd
东南卫视高清: rtmp://58.200.131.2:1935/livetv/dnhd
江西卫视高清: rtmp://58.200.131.2:1935/livetv/jxhd
河北卫视高清: rtmp://58.200.131.2:1935/livetv/hebhd
湖南卫视高清: rtmp://58.200.131.2:1935/livetv/hunanhd
湖北卫视高清: rtmp://58.200.131.2:1935/livetv/hbhd
辽宁卫视高清: rtmp://58.200.131.2:1935/livetv/lnhd
四川卫视高清: rtmp://58.200.131.2:1935/livetv/schd
江苏卫视高清: rtmp://58.200.131.2:1935/livetv/jshd
浙江卫视高清: rtmp://58.200.131.2:1935/livetv/zjhd
山东卫视高清: rtmp://58.200.131.2:1935/livetv/sdhd
广东卫视高清: rtmp://58.200.131.2:1935/livetv/gdhd
深圳卫视高清: rtmp://58.200.131.2:1935/livetv/szhd
黑龙江卫视高清: rtmp://58.200.131.2:1935/livetv/hljhd
CHC高清电影: rtmp://58.200.131.2:1935/livetv/chchd
上海纪实高清: rtmp://58.200.131.2:1935/livetv/docuchina
金鹰纪实高清: rtmp://58.200.131.2:1935/livetv/gedocu
全纪实高清: rtmp://58.200.131.2:1935/livetv/documentaryhd
凤凰卫视中文台: rtmp://58.200.131.2:1935/livetv/fhzw
凤凰卫视资讯台: rtmp://58.200.131.2:1935/livetv/fhzx
凤凰卫视电影台: rtmp://58.200.131.2:1935/livetv/fhdy
星空卫视: rtmp://58.200.131.2:1935/livetv/startv
Star Sports: rtmp://58.200.131.2:1935/livetv/starsports
Channel[V]: rtmp://58.200.131.2:1935/livetv/channelv
探索频道: rtmp://58.200.131.2:1935/livetv/discovery
国家地理频道: rtmp://58.200.131.2:1935/livetv/natlgeo
CHC家庭影院: rtmp://58.200.131.2:1935/livetv/chctv
CHC动作电影: rtmp://58.200.131.2:1935/livetv/chcatv
美国电视频道: rtmp://media3.scctv.net/live/scctv_800
香港财经: rtmp://202.69.69.180:443/webcast/bshdlive-pc

# HLS
CCTV-1综合:http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
CCTV-2财经:http://ivi.bupt.edu.cn/hls/cctv2hd.m3u8
CCTV-3综艺:http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
CCTV-4中文国际:http://ivi.bupt.edu.cn/hls/cctv4hd.m3u8
CCTV-5体育:http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8
CCTV-6电影:http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8
CCTV-7国防军事:http://ivi.bupt.edu.cn/hls/cctv7hd.m3u8
CCTV-8电视剧:http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8
CCTV-9纪录:http://ivi.bupt.edu.cn/hls/cctv9hd.m3u8
CCTV-10科教:http://ivi.bupt.edu.cn/hls/cctv10hd.m3u8
CCTV-11戏曲:http://ivi.bupt.edu.cn/hls/cctv11.m3u8
CCTV-12社会与法:http://ivi.bupt.edu.cn/hls/cctv12hd.m3u8
CCTV-13新闻:http://ivi.bupt.edu.cn/hls/cctv13.m3u8
CCTV-14少儿:http://ivi.bupt.edu.cn/hls/cctv14hd.m3u8
CCTV-15音乐:http://ivi.bupt.edu.cn/hls/cctv15.m3u8
CCTV-17农业农村:http://ivi.bupt.edu.cn/hls/cctv17hd.m3u8
CGTN:http://ivi.bupt.edu.cn/hls/cgtnhd.m3u8
CGTN DOC:http://ivi.bupt.edu.cn/hls/cgtndochd.m3u8
CHC:http://ivi.bupt.edu.cn/hls/chchd.m3u8
北京卫视高清:http://ivi.bupt.edu.cn/hls/btv1hd.m3u8
北京文艺高清:http://ivi.bupt.edu.cn/hls/btv2hd.m3u8
北京科教:http://ivi.bupt.edu.cn/hls/btv3.m3u8
北京影视高清:http://ivi.bupt.edu.cn/hls/btv4hd.m3u8
北京财经:http://ivi.bupt.edu.cn/hls/btv5.m3u8
北京生活:http://ivi.bupt.edu.cn/hls/btv7.m3u8
北京青年:http://ivi.bupt.edu.cn/hls/btv8.m3u8
北京新闻高清:http://ivi.bupt.edu.cn/hls/btv9hd.m3u8
北京卡酷少儿:http://ivi.bupt.edu.cn/hls/btv10.m3u8
湖南卫视高清:http://ivi.bupt.edu.cn/hls/hunanhd.m3u8
浙江卫视高清:http://ivi.bupt.edu.cn/hls/zjhd.m3u8
江苏卫视高清:http://ivi.bupt.edu.cn/hls/jshd.m3u8
东方卫视高清:http://ivi.bupt.edu.cn/hls/dfhd.m3u8
安徽卫视高清:http://ivi.bupt.edu.cn/hls/ahhd.m3u8
黑龙江卫视高清:http://ivi.bupt.edu.cn/hls/hljhd.m3u8
辽宁卫视高清:http://ivi.bupt.edu.cn/hls/lnhd.m3u8
深圳卫视高清:http://ivi.bupt.edu.cn/hls/szhd.m3u8
广东卫视高清:http://ivi.bupt.edu.cn/hls/gdhd.m3u8
天津卫视高清:http://ivi.bupt.edu.cn/hls/tjhd.m3u8
湖北卫视高清:http://ivi.bupt.edu.cn/hls/hbhd.m3u8
山东卫视高清:http://ivi.bupt.edu.cn/hls/sdhd.m3u8
重庆卫视高清:http://ivi.bupt.edu.cn/hls/cqhd.m3u8
上海纪实高清:http://ivi.bupt.edu.cn/hls/docuchina.m3u8
金鹰纪实高清:http://ivi.bupt.edu.cn/hls/gedocu.m3u8
福建东南卫视高清:http://ivi.bupt.edu.cn/hls/dnhd.m3u8
四川卫视高清:http://ivi.bupt.edu.cn/hls/schd.m3u8
河北卫视高清:http://ivi.bupt.edu.cn/hls/hebhd.m3u8
江西卫视高清:http://ivi.bupt.edu.cn/hls/jxhd.m3u8
河南卫视高清:http://ivi.bupt.edu.cn/hls/hnhd.m3u8
广西卫视高清:http://ivi.bupt.edu.cn/hls/gxhd.m3u8
吉林卫视高清:http://ivi.bupt.edu.cn/hls/jlhd.m3u8
CETV-1高清:http://ivi.bupt.edu.cn/hls/cetv1hd.m3u8
海南卫视高清:http://ivi.bupt.edu.cn/hls/lyhd.m3u8
贵州卫视高清:http://ivi.bupt.edu.cn/hls/gzhd.m3u8

About

基于Vue封装的Video.js播放器,支持HLS和RTMP直播流。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published