Skip to main content

Streaming

NPlayer 可以非常方便的接入流媒体协议,如果想使用 HLS 可以引入 hls.js

import Hls from 'hls'
import Player from 'player'
const hls = new Hls()
const player = new Player()
hls.attachMedia(player.video)
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
})
player.mount(document.body)

更多关于 hls.js 使用方法,请查看 hls.js 官方文档

hls 是视频点播很常用的协议,本教程还提供了使用 hls.js 实现清晰度切换功能,详情请查看 清晰度切换

DASH#

和 HLS 非常相似的是 DASH 协议,要使用 DASH 协议可以使用 dash.js 。

import dash from 'dashjs'
import Player from 'player'
const player = new Player()
dash
.MediaPlayer()
.create()
.initialize(
player.video,
'http://127.0.0.1:8001/out.mpd',
true // 自动播放
)

更多关于 dash.js 请查看 dash.js 官方文档

任何流媒体#

按照这个套路,其实任何这些流媒体都可以接入(flv, WebTorrent 等等)。因为它们只需要一个 video 元素就行,我们可以通过 player.video 属性访问到 video 元素。

除了让 NPlayer 自动创建 video 元素,还可以自己提供 video 元素。

import Hls from 'hls'
import Player from 'player'
const video = document.createElement('video')
const hls = new Hls()
const player = new Player({ video })
hls.attachMedia(player.video)
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
})
player.mount(document.body)

推荐文章#