video视频直播总结（m3u8格式、flv格式）

1、视频播放标签video

• video属性和方法的可以在网上直接找，链接菜鸟教程
  如果是MP4格式的视频，可以用video标签直接播放，其属性可以直接用，这个格式视频一般是静态的资源，可能是本地也可能是服务器上。

<video class="video-img" :src="url" controls="controls"></video>//url即视频地址

2、video标签事件与方法

• 事件是可以直接放到video标签上进行监听，在视频播放过程中会执行相应事件。
• 方法是可以直接获取video元素，不管是原生的getElementById(),还是vue的this.$refs来让video元素执行方法，video标签的方法比较少，如图，其他的都是事件，事件比较多。
  

3、m3u8格式视频流播放

• 该格式需要安装videojs与video标签结合播放

//html代码
<video id="videoss" class="video-js vjs-default-skin" style="width: 100%;height: 100%" muted><source :src="videoSrc" />
</video>
//js
import videojs from "video.js";//引入videojs
//在mounted中初始化
this.video = videojs("videoss",{controls: false,//这些都是video标签的属性loop: true,autoplay: true,width: "100%",height: "100%",preload: "auto",},function () {this.play();});

4、flv.js播放HTTP-FLV协议视频流

• 安装flvjs cnpm install --save flv.js
• 代码

<template><div class="video"><video id="videoElement" class="centeredVideo" autoplay controls width="1024" height="576"></video></div>
</template>
<script>
import flvjs from 'flv.js'
export default {data() {return {flvPlayer: null}},methods: {/*** @description 新建flv实例*/createFlvPlayer() {if (flvjs.isSupported()) {const videoElement = document.getElementById('videoElement')this.flvPlayer = flvjs.createPlayer({type: 'flv',isLive: true,url: window.g.videoBaseUrl})this.flvPlayer.attachMediaElement(videoElement)this.flvPlayer.load()this.flvPlayer.play()}},/*** @description 停止混流播放并移除直播流抓取* (注：离开并重新进入当前路由，观察Network，可知该操作的必要性)*/pausemix() {this.flvPlayer.pause()this.flvPlayer.unload()this.flvPlayer.detachMediaElement()this.flvPlayer.destroy()this.flvPlayer = null}},mounted() {this.createFlvPlayer()},beforeDestroy() {this.pausemix()}
}
</script>
<style lang="scss">
.video{height: 800px;width: 1920px;
}
</style>

5、总结

• 由于我的项目中从其他平台接入的是rtpm格式，这个格式需要flash插件，目前Chrome已经不支持。后台搭建了台服务器转格式，开始是转m3u8，但这个格式的实时性不好，有几秒的延时。后来改成flv协议了，不同的格式需要不同的播放器去解析。
• 刚刚开始我是有vue-video-player这个基于vue封装的video插件，这个插件是自己封装进度条（播放、暂停、音量、全屏切换、字幕、轨道），视频流的格式是基于videojs去封装的，对flvjs协议的视频流不兼容，就放弃用改插件了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！