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

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

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

相关阅读

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

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

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

相关网页前端(Html)video播放m3u8(HLS)&Vue使用video.js播放m3u8

网页前端(Html)video播放m3u8(HLS) HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术，包括一个m3u8的索引文件、

柔光的暖阳◎/ 2023年09月30日 12:49/ 0 赞/ 16 阅读

相关 vue3播放m3u8视频（videoJS）

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

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

相关最新版videoJS使用播放M3U8格式直播视频

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

客官°小女子只卖身不卖艺/ 2023年07月18日 09:17/ 0 赞/ 27 阅读

相关使用ffmpeg MP4转 m3u8并播放实测！！

安装ffmpeg yum -y install epel-release rpm --import http://li.nux.ro/download/nux

曾经终败给现在/ 2023年02月20日 07:27/ 0 赞/ 33 阅读

相关 videoJS 播放 u3m8 格式视频Demo

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

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

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

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

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

相关 videojs 播放.M3U8格式视频

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

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

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

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

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

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

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

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