Flv西瓜播放器(XGPlayer-flv)视频代码如何调用

阿豪运维笔记(阿豪同学) 2022-02-11 1.16 K阅读

温馨提示:这篇文章已超过235天没有更新,请注意相关的内容是否还可用!

前言

由于FLash插件停用的问题导致网站的时候调用了Flv视频格式文件无法播放,于是百度查找代码资料发现一款挺好用的Flv西瓜播放器下面跟大家介绍下如何使用

介绍

西瓜播放器是字节跳动推出的一款播放器,是一个Web视频播放器类库,它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现,在功能上也做了大胆的尝试:摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力,让本不支持流式播放的 mp4 能做到分段加载,这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时,它也集成了对 flv、hls、dash 的点播和直播支持

代码片段

<!--页面防止容器标签 -->
<div id="player"></div>
<!-- 引用XGPlayer的js文件 -->
<script src="http://cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
<script src="http://cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script>
<!--  页面初始化xgplayer -->
<script type="text/javascript">
    new window.FlvJsPlayer({
        id: 'player',
        playsinline: true,
        url: '视频地址',
        autoplay: true,
        volume: 0.6,
        height: 290,
        width: 225
    });
</script>

代码简介

url:视频链接地址
autoplay:true 是否自动播放,自动播放在chrome下需要先进行设置否则会造成此功能被拦截,chrome默认不允许视频自动播放
width, height 设置高度宽度1
volume :音量设置,默认0.6,参考值:0 ~ 1

更多的设置项,请参考官方文档

https://v2.h5player.bytedance.com/config/#%E5%BF%85%E9%80%89%E9%85%8D%E7%BD%AE 

代码生成

其他格式视频代码可以参考一键生成代码片段

https://v2.h5player.bytedance.com/generate/ 

代码演示

image.png

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作有参考学习价值
喜欢请点击上方【分享】,如果对您有帮助可点击上方【打赏】打赏本站。谢谢大家对阿豪运维笔记的支持。

文章作者: 阿豪运维笔记(阿豪同学)
本文链接:
文章版权:站长码字很辛苦,除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码