1、播放m3u8格式视频

  1. 安装依赖
    npm install video.js --save // 视频播放器插件
    npm install videojs-contrib-hls --save // 播放hls流插件
  2. 页面引入插件
import videojs from "video.js";import "video.js/dist/video-js.css";
  1. 页面中的使用
<template><div class="myVideo"><video id="videoPlayer" class="video-js vjs-default-skin" controls playsinline autoplay="autoplay" width="500px"><source :src="attachmentLink" type="application/x-mpegURL" /></video></div></template><script>import videojs from "video.js";import "video.js/dist/video-js.css";export default {data() {return {dp: null,options: {playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度aspectRatio:'16:9',notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。autoplay: false, // 设置自动播放muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）preload: "auto", // 预加载controls: true, // 显示播放的控件},attachmentLink: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8",};},mounted() { // 使用 $nextTick 解决vedio报错The element or ID supplied is not valid. (videojs)this.$nextTick(() => {this.loadVideo();});},methods: {loadVideo() {this.dp = videojs("videoPlayer", this.options);// 也可以使用以下方式给vedio设置 src// this.db.src([// {// src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址// type: "application/x-mpegURL", // 告诉videojs,这是一个hls流// },// ]);},// 销毁beforeDestroy() {if (this.dp) {this.dp.dispose(); // dispose()会直接删除Dom元素}},},};</script><style lang="less" scoped>.video-box {width: 100%;max-width: 500px;max-height: 500px;}// 暂停播放按钮居中::v-deep .video-js .vjs-big-play-button {top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>

2、flv格式的方案来播放视频

简介：flv.js是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。
开源地址: https://github.com/Bilibili/flv.js/

  1. 安装依赖
    npm install --save flv.js
  2. 页面引入插件
import flvjs from 'flv.js'
  1. 页面中的使用
<template><div class="preview"><div class="videoArea"><video id="videoElement" crossOrigin="anonymous" controls autoplay muted width="100%" height="800px"></video></div></div></template><script>import flvjs from 'flv.js'export default {data() {return {isPlay: false,player: null,};},methods: { // 设置视频配置(注意：createVideo应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效) createVideo() {if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');this.player= flvjs.createPlayer({type: 'flv',isLive: true,hasAudio: false,url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'// 自己的flv视频流},{cors: true, // 是否跨域// enableWorker: true, // 是否多线程工作enableStashBuffer: false, // 是否启用缓存stashInitialSize: 128, // 缓存大小(kb)默认384kbautoCleanupSourceBuffer: true // 是否自动清理缓存});this.player.attachMediaElement(videoElement);//挂载元素this.player.load();//加载流this.player.play();//播放流}// 报错重连 this.player.on(flvjs.Events.ERROR, (err, errdet) => {// 参数 err 是一级异常，errdet 是二级异常if (err == flvjs.ErrorTypes.MEDIA_ERROR) {console.log('媒体错误')if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED) {console.log('媒体格式不支持')}}if (err == flvjs.ErrorTypes.NETWORK_ERROR) {console.log('网络错误')if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {console.log('http状态码异常')}}if(err == flvjs.ErrorTypes.OTHER_ERROR) {console.log('其他异常：', errdet)} if (this.player) { this.destoryVideo() this.createVideo() } })},destoryVideo(){if (this.player) {this.player.pause();// 暂停播放数据流this.player.unload();// 取消数据流加载this.player.detachMediaElement();// 将播放实例从节点中取出this.player.destroy(); // 销毁播放实例this.player= null;}}},mounted() {this.$nextTick(() => {this.createVideo()})},beforeDestroy() {this.destoryVideo()},};</script><style lang="scss" scoped> </style>

3、mp4格式的方案来播放视频

<html><head><title>camera</title><script type="text/javascript">function play() {var video = document.getElementById("video");video.play();}</script></head><body>