位置: IT常识 - 正文
推荐整理分享使用videojs播放m3u8视频(video.js教程),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:video.js教程,video支持mp4格式吗,video.js怎么用,video.js能播放什么格式,video.js能播放什么格式,videojs支持的视频格式,videojs支持的视频格式,videojs播放m3u8格式文件,内容如对您有帮助,希望把文章链接给更多的朋友!
videojs是一个播放视频的js库,可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件 m3u8是一个文本文件(播放列表文件),里面的内容就是被播放的音视频文件路径或网址。存放了视频的基本信息和分段视频的索引地址。就是按顺序下载播放索引列表的视频,从而完成一部完整视频的播放。 先在项目中安装videojs。
npm install --save video.jsnpm install --save videojs-contrib-hls下载成功后在项目的package.json文件中,有这两行代码。
在需要播放视频的页面中引入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); } })播放效果图 视频的大小可以通过改变外层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() })上一篇:以DHT11、ESP8266为例介绍ESPHome在Home Assistant中的应用(esp8266 dht22)
下一篇:关于B站(bilibili)对未登录用户视频观看进行暂停和弹窗的分析与简单解决方案(关于B站bilibili名字的由来)
友情链接: 武汉网站建设