vue3使用videojs播放m3u8格式视频的方法详解

深巷的九 2024-11-14 09:22:44编程技术
125

在现代Web开发中,视频播放已经成为不可或缺的一部分。随着Vue 3的发布,开发者们对新特性的探索和应用也在不断深入。Videojs作为一款流行的开源视频播放器,因其丰富的功能和易用性,受到了广大开发者的青睐。本文将详细介绍如何在Vue 3项目中使用Videojs播放器播放M3U8格式的视频,并提供示例代码,帮助开发者快速上手。

vue3使用videojs 播放m3u8格式视频

videojs是一个播放视频的js库,可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件

m3u8是一个文本文件(播放列表文件),里面的内容就是被播放的音视频文件路径或网址。存放了视频的基本信息和分段视频的索引地址。就是按顺序下载播放索引列表的视频,从而完成一部完整视频的播放。

先在项目中安装videojs。

npm install --save video.js
npm install --save videojs-contrib-hls

下载成功后在项目的package.json文件中,有这两行代码。

vue3使用videojs播放m3u8格式视频的方法详解

在需要播放视频的页面中引入videojs

import 'video.js/dist/video-js.css';
import videojs from 'video.js';

在vue页面中加入video标签。

class="video-js vjs-default-skin"是videojs自带的样式需要加上,否则视频样式会有问题,style="width: 100%;height: 100%; object-fit: fill" 这行代码是为了使视频占满div容器。

 <div class="vedio">
      <video id="valveVideogj" class="video-js vjs-default-skin" autoplay
             style="width: 100%;height: 100%; object-fit: fill"></video>
</div>

在onMounted节点初始化播放器。

videojs函数有三个参数,分别为video标签id(id必须要唯一),要实例化的videojs配置,以及回调函数。options(rtsp)函数,rtsp为视频地址。http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8(网上找的m3u8格式视频)

  function options(src) {
            return {
                autoplay: true, // true,浏览器准备好时开始播放。
                muted: true, // 默认情况下将会消除音频。
                loop: true, // 导致视频一结束就重新开始。
                controls: false, //取消视频中的进度条
                preload: 'auto', // auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
                language: 'zh-CN',  //汉化
                fluid: true, // 当true时,将按比例缩放以适应其容器。
                sources: [{
                    type: 'application/x-mpegURL',
                    src  //视频播放地址
                }],
                notSupportedMessage: '此视频暂无法播放,请稍后再试', // 无法播放媒体源时显示的默认信息。
                textTrackDisplay: false,
            }
        }
  let player;
  onMounted(() => {
		try {
                player = videojs("valveVideo", options(rtsp), () => {
                    player.play();
                });
            } catch (error) {
                console.log(error);
            }	
    	})

播放效果图

vue3使用videojs播放m3u8格式视频的方法详解

vue3使用videojs播放m3u8格式视频的方法详解

视频的大小可以通过改变外层div容器的大小来改变。

.vedio {
	width: 632.89px;
  	height: 356px;
    background: #000;
    padding: 3px;
    border: 1px solid #707070;
    margin: 30px 30px 0 30px;
}

ps

从其他页面返回到该页面会碰到video.es.js:228 videojs: warn: player "valvevideogj" is already initialised. options will not be applied.错误

则是因为播放器已经初始化过了,不能重复调用video标签作用于同一个video id,需要离开页面是销毁video,再重新初始化。

        onUnmounted(() => {
            //离开页面时销毁video
            player.dispose()
        })

总结

通过本文的介绍,我们了解了如何在Vue 3项目中使用Video.js播放器播放M3U8格式的视频。我们从安装依赖、配置播放器、播放M3U8视频等方面进行了详细讲解,并提供了完整的示例代码。这些步骤和示例代码不仅能够帮助开发者快速上手Video.js,还能够为项目的视频播放功能提供有力支持。希望本文的内容能够为您的Vue 3开发之旅提供有力支持,让您的前端开发更加高效和便捷。

vue3 videojs m3u8
THE END
蜜芽
故事不长,也不难讲,四字概括,毫无意义。

相关推荐

Vue3插槽(slot)的使用方法全解
Vue3作为一款渐进式JavaScript框架,以其简洁、灵活和高效的特点赢得了广大开发者的青睐。插槽(slot)是Vue3中一个非常实用的特性,它允许我们在组件中定义可替换的内容区域,...
2024-11-19 编程技术
114

在Vue3中正确引入和使用ElementPlus组件库的示例代码
随着Vue 3的发布,开发者们对新特性的探索和应用也在不断深入。ElementPlus作为一款基于Vue 3的UI组件库,因其丰富的组件和易用性,受到了广大开发者的青睐。本文将详细介绍如...
2024-11-14 编程技术
110

推荐十个基于Vue3.0全家桶的优秀开源项目
Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x,Vue 3.0在性能、体积和开发体验上都有了很大的提升。本文将为大家推荐10 个基于 Vue3.0 全家桶的优秀开源项...
2024-03-29 编程技术
104