西瓜播放器xgplayer设置自动播放踩坑

最新推荐文章于 2024-09-15 07:25:14 发布
最新推荐文章于 2024-09-15 07:25:14 发布
阅读量890 收藏
点赞数 2
文章标签： 前端 vue.js xgplayer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hero_rong/article/details/139394715
版权

上图是官网（西瓜视频播放器官方中文文档）的介绍，相信大家都是按照官网配置去做的，但是并没有什么用，插件很好用，但是属性不全，真的很悔恨，找遍 api 都没有找到自动播放的属性！！最终看了大佬的文章发现了autoplayMuted属性

            'autoplayMuted':true, 允许自动播放

设置了这一属性，立马生效，都不需要什么 autoplay 

Hero_rong
关注
关于vue3开发西瓜视频播放器--xgplayer的那些坑
wxxuejishuangxia的博客
11-01 2529
写在前面，官网地址：https://v2.h5player.bytedance.com/plugins/#xgplayer-flv-js刚入职就接手一个需求，开发一个直播流，实现在线实时监控的播放功能。话不多说，直接进入主题，坑在哪里？用西瓜视频播放器的插件实现时要注意区分视频格式是flv或者是MP4格式，还是直播流，每种类型的插件选择是不一样的，例如：这个是直播流的插件踩坑踩多了也就习惯了，还好官网有示例，可以反复尝试。各位小伙伴，如果需要实现flv视频播放的话，代码呈上，请笑纳！
西瓜播放器xgplayer设置自动播放
weixin_45753961的博客
06-02 4745
前言： 用西瓜播放器做rtsp直播流的播放，想要在页面加载时自动播放。 设置autoplay:ture,muted:ture,嘿没有成功！ 在网上找了半天，设置手动触发play.play()，修改参数，都没有用. 最后在某个网友的评论里面找到了怎么设置自动播放，当场惊呼太强了。 一是因为文档里面完全没有这个属性， 二是因为找了半天网友都没有说怎么设置自动播放， 三是为什么别的播放插件只要设置autoplay:ture,muted:ture,就可以自动播放了，这个西瓜播放器插件不行啊摔桌！ ，还要设置auto
西瓜播放器魔改版(xgplayerpro) 使用与安装指南
最新发布
gitblog_00933的博客
09-15 494
西瓜播放器魔改版(xgplayerpro) 使用与安装指南 xgplayerpro 项目地址: https://gitcode.com/gh_mirrors/xg/xgplayerpro ...
xgplayer
ju1552470851的博客
10-19 1270
可以在mounted()生命周期内调用这个方法，或者在请求到数据之后调用，panel : true , // 弹幕面板 comments : [ {duration : 15000 , // 弹幕持续显示时间，毫秒(最低为5000毫秒) id : 1 , //弹幕id,需唯一 prior : false , // 弹幕优先显示，默认false color : false , // 彩色弹幕，默认false txt : 'item.text' , // 弹幕文字内容 style : {
【xgplayer】xgplayer填坑记 | xgplayer全屏与css全屏冲突
此人太懒，没有任何简介
03-07 2422
【xgplayer】xgplayer填坑记 && xgplayer全屏与css全屏冲突
使用XGPlayer播放视频
cnfabu的博客
08-19 257
【代码】使用XGPlayer播放视频。
xgplayer插件的使用-西瓜播放器 ---- Vue3中使用
前端菜菜DayDayUp的博客
04-17 2355
xgplayer插件的使用-西瓜播放器 ---- Vue3中使用
西瓜播放器xgplayer的简单使用demo
weixin_45753961的博客
06-02 6173
安装 npm install xgplayer --save npm install --save xgplayer-flv.js 引入 import FlvJsPlayer from 'xgplayer-flv.js'; import Player from 'xgplayer'; 使用 <div class="video" v-show="isPlay" :id="camDOMid" ref="video"></div> isPlay: false, player
西瓜播放器使用demo
09-28
西瓜播放器是一款流行的在线视频播放解决方案，尤其在嵌入式网页视频播放方面有着广泛的应用。这个"西瓜播放器使用demo"提供了一个简单的示例，帮助开发者了解如何在浏览器环境中使用该播放器。以下是对相关知识点的...
DzzOffice 西瓜播放器（xgplayer）插件 V1.01
08-18
基于DzzOffice开发的一个功能强大，符合国内视频播放业务的 web 视频播放组件 更多详细说明请访问 DzzOffice 小胡团队 查看。 DzzOffice 小胡版安装和升级插件说明（详细教程请在DzzOffice 笔记中查看）： 下载并...
Vue2 - 详细实现安装西瓜视频 xgplayer 插件详细配置及使用教程，利用西瓜视频播放器播放 mp4、flv、hls 格式视频文件及视频推流（直播或监控摄像头画面），支持移动端H5及PC网站！
王佳斌
08-04 4038
vue2，nuxt2，西瓜视频，xgplayer，插件组件，xgplayer-hls，xgplayer-flv，xgplayer-mp4，播放视频点播和直播视频流，自定义播放器样式，截屏，监控视频，vue使用西瓜播放器播放flv、hls、mp4视频，截屏按钮，直播流，报错，黑屏，加载失败，苹果ios不兼容，重连，怎么改样式，很卡，详细教程，监控实时播放推流，倍速播放，在线flv在线推流地址，HLS播放，vue西瓜播放器，vue如何使用西瓜视频插件做直播推流回流，视频点播，flv在线视频流播放，截图功能，利用
xgplayer-vue:xgplayer的Vue组件，这是一个HTML5视频播放器，具有解析器，可以节省流量
05-07
介绍 xgplayer是一个网络视频播放器库。 它基于一切都被组件化的原则设计了一个单独的，可分离的UI组件。 更重要的是，它不仅在UI层上很灵活，而且在功能上也大胆：它摆脱了视频加载，缓冲和对视频依存性的格式支持。 特别是在mp4上，可以分阶段加载，因为它不支持流mp4。 这意味着可以进行无缝切换，同时实现清晰度，负载控制和视频节省。 它还集成了对FLV，HLS和破折号的按需和实时支持。 xgplayer-vue是封装xgplayer的Vue组件。 开始 安装 $ npm install xgplayer-vue@latest 用法 步骤1.添加xgplayer-vue组件 import Xgplayer from 'xgplayer-vue' ; export default { components : { Xgplayer } } 步骤2.在模板中使用 < Xg
xgplayer带有解析器的Web视频播放器可以节省流量
08-11
xgplayer - 带有解析器的Web视频播放器，可以节省流量
XGPlayer – 强大的HTML5视频解析播放器
EtwCpp的博客
09-27 977
XGPlayer是一款强大的HTML5视频解析播放器，提供了高质量的视频解析和播放功能，同时具有自定义皮肤和样式、全屏和窗口模式、多种播放控制选项等特点。通过使用XGPlayer，开发者可以轻松地在网页上嵌入视频，并为用户提供优秀的观看体验。请注意，上述代码仅为示例，实际使用时需要根据具体情况进行相应的修改和适配。
taro3+react使用西瓜播放器（xgplayer）封装跨端（H5、微信小程序）视频播放组件及进阶封装（xgplayerSwiper）
qq_45447899的博客
02-22 1267
【代码】taro3+react使用西瓜播放器（xgplayer）封装跨端（H5、微信小程序）视频播放组件。
vue - vue中使用西瓜播放器xgplayer
热门推荐
qq_43886365的博客
08-15 1万+
vue中使用xgplayer(西瓜播放器)插件教程
html5组件化,xgplayer: 西瓜播放器是一个HTML5播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝...
weixin_31199791的博客
07-04 470
概述西瓜播放器是一个Web视频播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也...
uniapp引入xgplayer(西瓜播放器)实现视频监控
m0_48995032的博客
02-14 9170
uniapp 实现播放直播流，引入xgplayer
vue中使用xgplayer(西瓜播放器)插件进行视频的播放
qq_46344419的博客
05-10 4276
vue中使用xgplayer(西瓜播放器)插件进行视频的播放
西瓜视频播放器xgplayer重复播放，如何添加缓存
07-11
您可以尝试以下方法来添加缓存功能到xgplayer中，以避免重复播放： 1. 使用浏览器缓存：xgplayer默认使用浏览器的缓存机制，通过设置服务器响应头中的Cache-Control和Expires字段来控制缓存时间。您可以查看xgplayer的文档或参考相关资料，了解如何配置服务器响应头。 2. 使用视频预加载：在视频播放之前，可以使用HTML5的preload属性将视频预加载到浏览器缓存中。您可以通过修改xgplayer的配置，将preload属性设置为"auto"或"metadata"，这样在视频播放之前会自动将视频加载到浏览器缓存中。 3. 使用Range请求：xgplayer支持使用Range请求来分段加载视频，从而减少网络传输的开销。您可以通过修改xgplayer的配置，启用Range请求功能。这将使xgplayer在播放视频时，只请求当前播放位置附近的数据，而不是一次性请求整个视频文件。 4. 使用本地缓存：您可以使用Web Storage API（如localStorage或sessionStorage）将视频数据缓存在浏览器中。当用户再次打开页面时，如果视频已经被缓存，就可以直接从本地加载，而不需要重新请求服务器。 请注意，具体的实现方式可能会因您使用的xgplayer版本和配置而有所不同。建议您查阅xgplayer的文档，或参考相关的开发资料，以获取更详细的指导。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值