vue-video-player 播放m3u8视频流的实现

2024-09-29 23:14:36

该问题网上答案较少,翻阅github得到想要的答案，在此记录一下

首先，为了减少包体积，在组件中局部引入vue-video-player（在main.j s中引入会增加包体积）

播放m3u8需要注意两点：

需要引入videojs并绑定到window上
安装依赖videojs-contrib-hls( npm i videojs-contrib-hls)并引入
sources要指定type为application/x-mpegURL

代码如下：

<template>
    <section>
        <video-player :options="options"></video-player>
    </section>
</template>

<script>
import { videoPlayer } from 'vue-video-player'

import videojs from 'video.js'
//注意点1：需要引入videojs并绑定到window上
window.videojs = videojs
//注意点2：引入依赖
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')

require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

export default {
    name: 'test-video-player',
    components: {
        videoPlayer
    },
    data() {
        return {
            options: {
                autoplay: false,
                height: '720',
                playbackRates: [0.7, 1.0, 1.25, 1.5, 2.0],
                sources: [
                    {
                        withCredentials: false,
                        type: 'application/x-mpegURL', //注意点3：这里的type需要指定为 'application/x-mpegURL'
                        src:
                            'https://tx-safety-video.acfun.cn/mediacloud/acfun/acfun_video/47252fc26243b079-e992c6c3928c6be2dcb2426c2743ceca-hls_720p_2.m3u8?pkey=ABDuFNTOUnsfYOEZC286rORZhpfh5uaNeFhzffUnwTFoS8-3NBSQEvWcqdKGtIRMgiywklkZvPdU-2avzKUT-I738UJX6urdwxy_ZHp617win7G6ga30Lfvfp2AyAVoUMjhVkiCnKeObrMEPVn4x749wFaigz-mPaWPGAf5uVvR0kbkVIw6x-HZTlgyY6tj-eE_rVnxHvB1XJ01_JhXMVWh70zlJ89EL2wsdPfhrgeLCWQ&safety_id=AAKir561j0mZgTqDfijAYjR6'
                    }
                ],
                hls: true
            }
        }
    },
    computed: {},
    methods: {},
    created() {}
}
</script>

<style lang="" scoped></style>

参考

https://github.com/surmon-china/vue-video-player/blob/master/examples/04-video.vue

到此这篇关于vue-video-player 播放m3u8视频流的实现的文章就介绍到这了,更多相关vue-video-player 播放m3u8视频流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue-video-player 断点续播的实现

最近的项目中需要实现视频断点续播的功能,一听到这个功能.内心方张了..但却又有点小窃喜,小懵乱.抱着求学态度去挑战一下. 1.安装插件 npm install vue-video-player --save 2.Main.js 引入组件 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') V
vue使用video插件vue-video-player的示例

一.安装插件 npm install vue-video-player --save 二.配置插件在main.js中全局配置插件 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer) 三.使用插件在vue组件中的程序如下: <template>
详解vue-video-player使用心得（兼容m3u8）

下载vue-video-player npm install vue-video-player --save 在main.js文件引入 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer) 在页面中引入 <video-player ref="vi
vue视频播放插件vue-video-player的具体使用方法

安装 npm install vue-video-player --save 引入可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一) [1]全局引用, 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) [2
使用vue-video-player实现直播的方式

目录一.安装vue-video-player 二.使用 vue-video-player 课前准备:直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html 摘要:在H5页面实现观看直播+视频回放:在开发期间使用过video.js.mui-player等插件,发现这些video插件对移动端的兼容性都不友好,最后发现一个在移动端兼容不错的插件——vue-video-player 场景: 移动端H5页面,项目是vue搭建的,使用的是HLS协议以m
vue-video-player视频播放器使用配置详解

本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下 1.安装 npm install vue-video-player -save 2.在main.js中添加 import VueVideoPlayer from 'vue-video-player' // 视频播放器 import 'video.js/dist/video-js.css' Vue.use(VueVideoPlayer) 3.新建一个vueVideoPlayer.vue组件供调用 <
vue video和vue-video-player实现视频铺满教程

网页放置视频播放器,我一般都是用video.js和它的插件vue-video-player 一:Video.js 需求:对于简单的视频播放需求来说,video.js足以胜任了. 它可是支持HTML5和Flash的视频播放器呦. 1:安装video.js npm install -s video.js 2:在main.js文件中引入相关文件 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.
vue使用video插件vue-video-player详解

本文实例为大家分享了vue使用video插件vue-video-player的具体代码,供大家参考,具体内容如下进入我们的项目文件夹中,并打开命令行窗口,然后进行下面的步骤: 1.安装vue-video-player 输入命令: npm install vue-video-player -S 2.引入插件在项目的入口文件main.js中引入插件,如下: import VideoPlayer from 'vue-video-player' require('video.js/dist/vide
Vue结合Video.js播放m3u8视频流的方法示例

首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls
如何在vue中使用video.js播放m3u8格式的视频

@[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y
vue-video-player 播放m3u8视频流的实现

该问题网上答案较少,翻阅github得到想要的答案,在此记录一下首先,为了减少包体积,在组件中局部引入vue-video-player(在main.j s中引入会增加包体积) 播放m3u8需要注意两点: 需要引入videojs并绑定到window上安装依赖videojs-contrib-hls( npm i videojs-contrib-hls)并引入 sources要指定type为application/x-mpegURL 代码如下: <template> <section>
vue通过video.js解决m3u8视频播放格式的方法

前言今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看.会使用两种方法来解决这个问题第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,
Vue中Video标签播放解析后短视频去水印无响应解决

目录问题: 情景复现: 链接在Video标签打不开链接浏览器正常打开出现的原理解决方式前端解决全局添加标签 Vue单页面添加标签完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口我们前端打
Vue如何接入hls/m3u8的直播视频详解

目录前言互联网网络流媒体简介播放HLS格式的视频安装实现坑总结前言最近做了一个后台系统,需要调取工厂监控视频流显示在前端的页面上,其中遇到了一些坑,在这里做个记录,希望对前端小伙伴有所帮助吧!废话不多说了,直接开搞互联网网络流媒体简介这块我也不是很懂,博大精深,不在这扯皮了,大家只需要知道常见的几种流媒体格式就行,至于发展与演变,里面的专业知识,我也不懂,主要的流媒体格式有RTSP,RTMP,HLS,WebRtc,这些足够解决日常开发了播放HLS格式的视频为什么要选择H
vue项目中播放rtmp视频文件流的方法

想要播放rtmp视频文件流用H5的video标签是不可行的,所以这里我引用了一款插件 vue-video-player ,当然想要流畅的运用 vue-video-player 播放视频还必须安装辅助插件 videojs-flash.最后还要特别注意的是必须使用npm安装,当然我在安装过程中也遇到了一个问题,就是在选择使用 vue-video-player前还安装了videojs插件,卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响,一直运行不起来,后面我把n
利用Vue实现简易播放器的完整代码

看b站某马学习,实现一个属于自己的播放器 HTML+CSS+JS <section id="xwyy">  <section class="box" style="margin-top: 30px;"> <div class="nav"> <div class="nava"> <h1>小王音乐</h1>
vue-music关于Player播放器组件详解

本文实例为大家分享了关于Player播放器组件的具体内容,供大家参考,具体内容如下迷你播放器: 1.播放器组件会在各个页面的情况下会打开. 首先在vuex state.js 中定义全局的播放器状态 import {playMode} from 'common/js/config.js'; const state = { singer:{}, playing:false, //是否播放 fullScreen:false, //是否全屏 playList:[], //播放列表 sequenceLi

vue-video-player 播放m3u8视频流的实现

参考

相关推荐

随机推荐