前端播放.flv视频流视频

标签：document url flvPlayer 视频流 flv 播放

首先提供一个测试.flv视频是否可以播放的小工具：

一、测试工具使用
可以自己下载potplayer这个软件，很小的一个软件，使用很方便，可以自己测试视频流是否可用。下载链接如下：
https://potplayer.en.softonic.com/download

具体使用方法如下：
在软件屏幕上右击，然后选择【打开】–> 【打开链接】

 

 

然后在上方输入在线测试的链接，然后点击【确定】

如果当前在线链接可以用，就会播放出视频，否则的话就会报错，如下图，就知道当前的视频流不可用了。

二、flv

我在页面需要展示一个监控画面，所以拿到了一个.flv+token形式的的地址。

因为前端vue的<video>标签src不支持播放这种格式，所以引入了flv。过程很多报错，尝试换用慧视云平台的SDK发现不支持这种格式的视频。（  http/flv协议 h264编码的 ）

所以又继续用flv。网上可以查到用法，主要是mounted里，可能本地会报网络错误，可以暴露下地址在其他电脑试试看。

<template>   <div>     <video id="videoElement" controls autoplay muted width="100%" height="50%">     </video>   </div> </template>
<script> import flvjs from 'flv.js' export default {   props: {     url: {       type: String     }   },   data() {     return {       flvPlayer: null     }   },   mounted() {     console.log('这里接收URL', this.url)     if (flvjs.isSupported()) {       console.log('走了')       var videoElement = document.getElementById('videoElement')       this.flvPlayer = flvjs.createPlayer({         type: 'flv',         isLive: true,         hasAudio: false,         url: this.url   // 自己的flv视频流       })       this.flvPlayer.attachMediaElement(videoElement)       this.flvPlayer.load()       this.flvPlayer.play()     }   },   methods: {     play() {       this.flvPlayer.play()     }   },   beforeDestroy() {     this.url = ''   } } </script> TRANSLATE with x English

Arabic	Hebrew	Polish
Bulgarian	Hindi	Portuguese
Catalan	Hmong Daw	Romanian
Chinese Simplified	Hungarian	Russian
Chinese Traditional	Indonesian	Slovak
Czech	Italian	Slovenian
Danish	Japanese	Spanish
Dutch	Klingon	Swedish
English	Korean	Thai
Estonian	Latvian	Turkish
Finnish	Lithuanian	Ukrainian
French	Malay	Urdu
German	Maltese	Vietnamese
Greek	Norwegian	Welsh
Haitian Creole	Persian

  TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back

标签：document,url,flvPlayer,视频流,flv,播放
From： https://www.cnblogs.com/ldywebhome/p/17393700.html