vue中使用video标签播放MP4，m3u8格式视频

布满荆棘的人生 2021-07-25 23:59 3391阅读 0赞

# 一，播放MP4视频 #

<video
         src="/video/suanfa.mp4"
         controls
         width="100%"
         height="100%"
         poster="/video/img_cover.png" //视频初始封面地址。可选
    ></video>

目录结构：

![20201120104204532.png][]

# 二，播放m3u8格式视频 #

比如播放m3u8格式的监控摄像头的视频

首先安装

cnpm i -S video.js
     cnpm i -S videojs-contrib-hls

在main.js文件中引入css

//  main.js中引入css
    import 'video.js/dist/video-js.css'

在使用的.Vue文件中,引入video.js和video-contrib-bls

import videojs from 'video.js'
    import 'videojs-contrib-hls'

src可以设置成动态修改

注意：宽高设为具体的值

<template>
        <div>
            <video
              id="my-video"
              class="video-js vjs-default-skin"
              controls
              preload="auto"
              style="width:700px;height:400px"
            >
                <source
                    src="https:xxx.m3u8"
                    type="application/x-mpegURL"
                />
            </video>
        </div>
    </template>

播放

export default {
        mounted() {
            videojs("my-video",
                function() {
                this.play();
            });
        }
    };

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

[20201120104204532.png]: /images/20210725/027e14d4ea1848d590dcf2dc403a5464.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/a3b72d18a49e485caa94a5cbbf5f1432.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3391人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3播放m3u8视频（videoJS）

安装 npm install video.js --save 组件内导入需要同时导入videoJS以及相关的CSS import videoj

小咪咪/ 2023年09月23日 19:25/ 0 赞/ 128 阅读

相关 videoJS 播放 u3m8 格式视频Demo

videoJS 播放 u3m8 格式视频Demo [VideoJs 官网地址][VideoJs] <!DOCTYPE html> <html lan

ゞ浴缸里的玫瑰/ 2022年10月16日 01:56/ 0 赞/ 289 阅读

相关视频直播技术之HLS 如何播放m3u8格式

引言在H5新标签video诞生之前，基本上所有直播都是用flash实现的。常用的流媒体协议主要有 HTTP 渐进下载和基于 RTSP/RTP 的实时流媒体协议，这两种协议

缺乏、安全感/ 2022年05月29日 06:43/ 0 赞/ 1060 阅读

相关【JS】video播放m3u8格式连续播放以及播放列表

解决m3u8播放失败的问题当不需要动态加载视频源的时候直接引入插件的地址即可 <div class="videoBox"> <video clas

清疚/ 2022年05月28日 06:12/ 0 赞/ 335 阅读

相关 Chrome、firefox浏览器中video标签无法播放MP4视频问题

这段时间做项目，用到了video标签，发现在edge里面正常播放视频，到了chrome、firefox里面无法播放视频。一开始以为是跨域问题，后来才发现是MP4格式编码方式的问

深藏阁楼爱情的钟/ 2022年05月28日 02:21/ 0 赞/ 1674 阅读

相关 Video.js插件切换视频源并操作m3u8格式视频

目录第一章 videojs的配置与简介第二章更改视频源代码与实例第三章 api的部分应用实例第四章视频api补充介绍添加事件事件绑定 ------

客官°小女子只卖身不卖艺/ 2022年05月09日 09:44/ 0 赞/ 909 阅读

相关 videojs 播放.M3U8格式视频

1.原生video标签网页端只支持MP4、OGG、WebM的视频格式 2.直播的视频格式一般为.m3u8，如果不行对video进行格外处理，可以采用video.js插件

ゝ一世哀愁。/ 2022年03月08日 19:30/ 0 赞/ 1027 阅读

相关 m3u8格式视频源列表

平时,需要测试m3u8格式视频的播放,会使用一些可用的播放源,整理在这里: const sourceList = [ { name: 'cct

朱雀/ 2022年01月30日 12:57/ 0 赞/ 473 阅读

相关 vue 播放m3u8视频( vue-videojs7)

1.安装插件 [Github地址][Github] npm install vue-videojs7 --save 2.封装组件VideoPlayer.vu

深碍√TFBOYSˉ_/ 2021年09月07日 10:34/ 0 赞/ 609 阅读

相关 vue中使用video标签播放MP4，m3u8格式视频

一，播放MP4视频 <video src="/video/suanfa.mp4" controls w

布满荆棘的人生/ 2021年07月25日 23:59/ 0 赞/ 3392 阅读