一、互联网网络流媒体简介
HTTP stream是各家自己定义的http流，应用于国内点播视频网站。
HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Live Streaming，可支持流媒体的直播和点播，主要应用在 iOS 系统，为 iOS 设备（如 iPhone、iPad）提供音视频直播和点播方案。
RTMP是实时消息传输协议，Real Time Messaging Protocol，是 Adobe Systems 公司为 Flash 播放器和服务器之间音频、视频和数据传输开发的开放协议。协议基于 TCP，是一个协议族，包括 RTMP 基本协议及 RTMPT/RTMPS/RTMPE 等多种变种。RTMP 是一种设计用来进行实时数据通信的网络协议，主要用来在 Flash/AIR 平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。
HTTP用于点播，本质上还是文件分发，实时性差。
HLS支持点播和直播 ，HLS的延迟在10秒以上。
RTMP本质上是流协议，主要的优势是：实时性高(实时性一般在3秒之内)、稳定性高。主要用于直播应用，对实时性有一定要求。
RTMP协议一般传输的是flv，f4v格式流，RTSP协议一般传输的是ts,mp4格式的流。HTTP没有特定的流。
HLS直播源地址：
CCTV1高清：ivi.bupt.edu.cn/hls/cctv1hd…
CCTV3高清：ivi.bupt.edu.cn/hls/cctv3hd…
CCTV6高清：ivi.bupt.edu.cn/hls/cctv6hd…
RTMP直播源地址：
香港卫视：rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks2
湖南卫视：rtmp://58.200.131.2:1935/livetv/hunantv
美国1：rtmp://ns8.indexforce.com/home/mystream
美国中文电视：rtmp://media3.sinovision.net:1935/live/livestream
香港财经：rtmp://202.69.69.180:443/webcast/bshdlive-pc
韩国GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
选用Video.js作为视频播放库，如果要支持hls m3u8还需要videojs-contrib-hls组件的支持。
安装 Video.js
npm install --save video.js
main.js引入video.js
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = video;
import 'videojs-flash'; // 要播放rtmp流, 就必须引入videojs-flash
import hls from 'videojs-contrib-hls';
Vue.use(hls); // 要播放hls流, 就必须引入videojs-contrib-hls
播放rtmp流
<template>
<div class='instance'>
<video id='#video' />
</div>
</template>
<script>
export default {
mounted() {
this.initVideoPlayer()
},
data() {
return {
// 要进行播放的rtmp地址
nowPlayVideoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1'
}
},
methods: {
// 初始化播放器方法
initVideoPlayer() {
// 第一个选中的要播放的video标签, 记得是video标签,
const currentInstance = this.$video(document.querySelector('#video'), {
autoplay: true, // 是否自动播放
controls: true, // 是否显示控件
})
currentInstance.src({
src: this.nowPlayVideoUrl,
type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频
})
}
}
},
}
</script>
<style>
#video {
width: 300px;
height: 500px
}
</style>
播放hls流
<template>
<div class='instance'>
<video id='#video' />
</div>
</template>
<script>
export default {
mounted() {
this.initVideoPlayer()
},
data() {
return {
// 要播放的hls流
nowPlayVideoUrl: 'http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8'
}
},
methods: {
// 初始化播放器方法
initVideoPlayer() {
// 第一个选中的要播放的video标签, 记得是video标签,
const currentInstance = this.$video(document.querySelector('#video'), {
autoplay: true, // 是否自动播放
controls: true, // 是否显示控件
})
currentInstance.src({
src: this.nowPlayVideoUrl,
type: 'application/x-mpegURL', // 修改这个type值
})
}
}
},
}
</script>
<style>
#video {
width: 300px;
height: 500px
}
</style>
