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

布满荆棘的人生 2021-07-25 23:59 3471阅读 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 条评论，3471人围观）

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

相关阅读

相关使用videojs播放rtmp和m3u8视频

方式一、可播rtmp和m3u8 rtmp <html> <head> <title>videojs 7.4.1 play rtmp vi...

╰+哭是因爲堅強的太久メ/ 2024年04月18日 22:13/ 0 赞/ 84 阅读

相关 048：利用vue-video-player播放m3u8

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center] 第048个查看专栏目录: [VUE][] \-

￡神魔★判官ぃ/ 2024年02月05日 13:52/ 0 赞/ 33 阅读

相关 vue3播放m3u8视频（videoJS）

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

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

相关 php m3u8转mp4

m3u8格式转mp4 例如现有一个m3u8格式的视频地址：[https://rescdn.yishihui.com/longvideo/videocomposite/outp

忘是亡心i/ 2023年05月28日 09:49/ 0 赞/ 7 阅读

相关 videoJS 播放 u3m8 格式视频Demo

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

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

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

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

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

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

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

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

相关 videojs 播放.M3U8格式视频

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

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

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

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

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

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

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

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