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

于 2024-06-02 18:02:19 发布
阅读量438 收藏
点赞数 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
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
西瓜播放器xgplayer设置自动播放
weixin_45753961的博客
06-02 4505
前言： 用西瓜播放器做rtsp直播流的播放，想要在页面加载时自动播放。 设置autoplay:ture,muted:ture,嘿没有成功！ 在网上找了半天，设置手动触发play.play()，修改参数，都没有用. 最后在某个网友的评论里面找到了怎么设置自动播放，当场惊呼太强了。 一是因为文档里面完全没有这个属性， 二是因为找了半天网友都没有说怎么设置自动播放， 三是为什么别的播放插件只要设置autoplay:ture,muted:ture,就可以自动播放了，这个西瓜播放器插件不行啊摔桌！ ，还要设置auto
xgplayer带有解析器的Web视频播放器可以节省流量
08-11
xgplayer - 带有解析器的Web视频播放器，可以节省流量
vue3中使用西瓜视频插件xgplayer
努力飞起的菜鸟
01-31 1402
【代码】vue3中使用西瓜视频插件xgplayer。
西瓜视频（xgplayer）播放hls视频
qq_29170455的博客
09-14 1359
今天针对hls西瓜视频的插件来分享记录下，个人觉得xgplayer的体验和对流的控制是要比hls.js要好很多的，不废话直接上代码。vite项目下，使用依赖import 的方式播放有问题，需要改为全局引入静态min.js。平时经常对接视频flv、hls、萤石云等，但是一直没有做记录分享；可以去西瓜视频官网上去f12down一下文件。
实现xgplayer 西瓜播放器截图自定义功能
最新发布
eshine Lau 的博客
03-24 237
xgplayer 西瓜播放器中截图 具体的需求是我需要在播放器外面实现一个按钮，去调用播放器的截图功能，然后获取到截取的图片。
关于vue3开发西瓜视频播放器--xgplayer的那些坑
wxxuejishuangxia的博客
11-01 2013
写在前面，官网地址：https://v2.h5player.bytedance.com/plugins/#xgplayer-flv-js刚入职就接手一个需求，开发一个直播流，实现在线实时监控的播放功能。话不多说，直接进入主题，坑在哪里？用西瓜视频播放器的插件实现时要注意区分视频格式是flv或者是MP4格式，还是直播流，每种类型的插件选择是不一样的，例如：这个是直播流的插件踩坑踩多了也就习惯了，还好官网有示例，可以反复尝试。各位小伙伴，如果需要实现flv视频播放的话，代码呈上，请笑纳！
【xgplayer】xgplayer填坑记 | xgplayer全屏与css全屏冲突
此人太懒，没有任何简介
03-07 2003
【xgplayer】xgplayer填坑记 && xgplayer全屏与css全屏冲突
xgplayer西瓜视频插件引用后因视频格式引起问题？
为写出赏心悦目、容易维护的代码而探索
11-16 2467
vue3引用插件有问题？
推荐一款视频控件xgplayer
wade3po的博客
04-22 4979
H5有了video标签之后，视频播放好像变得异常简单。之前也做个视频播放，觉得只要地址对了，很轻松就能播放了。 最近一直做关于视频播放的东西，才觉得自己就只会播放简单的，如果是直播，什么rtmp、flv、webrtc这些，都只能用第三方的。 对于video标签，我们一查，几乎都是videojs，不管什么框架的video UI，几乎都跟videojs挂钩，今天推荐一个西瓜视频的第三方插件，然后就是自...
【Xgplayer】xgplayer基本使用 | xgplayer使用 | 超好的前端视频播放器 | xgplayer前端最好视频播放器
热门推荐
此人太懒，没有任何简介
03-08 1万+
【Xgplayer】xgplayer基本使用 & xgplayer使用 & 超级牛逼的前端视频播放器 && xgplayer前端最好视频播放器
西瓜播放器使用demo
09-28
西瓜播放器是一款流行的在线视频播放解决方案，尤其在嵌入式网页视频播放方面有着广泛的应用。这个"西瓜播放器使用demo"提供了一个简单的示例，帮助开发者了解如何在浏览器环境中使用该播放器。以下是对相关知识点的...
RTSP视频直播流地址播放器.rar
07-15
然后，使用这个播放器输入地址，软件会自动处理剩下的连接和播放工作。确保你的网络环境稳定，因为实时流媒体对网络质量有较高要求，延迟或丢包可能导致播放问题。 总的来说，RTSP视频直播流地址播放器是实现远程...
基于Angular的西瓜播放器
08-10
总之，“基于Angular的西瓜播放器”为Angular开发者提供了一种高效且灵活的视频播放解决方案，结合了Angular的强大和XGPlayer的专业性，使得在Web应用中实现复杂的视频播放功能变得更加简单。通过深入理解和实践这个...
python Selenium-webdriver自动化视频播放
10-19
通过Python-selenium库,控制浏览器实现自动化，模仿人在浏览器上进行...对视频进行播放，速率，声音的自动化选择。适用人群：对视频播放自动化有需求，没有时间换视频集数的人群，有一定python和html基础的人都可以用。
vue中使用xgplayer(西瓜播放器)插件进行视频的播放
qq_46344419的博客
05-10 4041
vue中使用xgplayer(西瓜播放器)插件进行视频的播放
vue使用西瓜视频插件xgplayer
qq_49080170的博客
03-07 1132
vue使用西瓜视频插件xgplayer
【Xgplayer】xgplayer自定义截屏按钮 | xgplaye截屏功能 | xgplayer截屏触发 | xgplayer截屏方法 | vue3使用xgplayer
此人太懒，没有任何简介
03-09 1387
【Xgplayer】xgplayer自定义截屏按钮 && xgplaye截屏功能 && xgplayer截屏触发 && xgplayer截屏方法 &&vue3使用xgplayer
xgplayer
ju1552470851的博客
10-19 1197
可以在mounted()生命周期内调用这个方法，或者在请求到数据之后调用，panel : true , // 弹幕面板 comments : [ {duration : 15000 , // 弹幕持续显示时间，毫秒(最低为5000毫秒) id : 1 , //弹幕id,需唯一 prior : false , // 弹幕优先显示，默认false color : false , // 彩色弹幕，默认false txt : 'item.text' , // 弹幕文字内容 style : {
西瓜视频播放器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、付费专栏及课程。

余额充值