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

2022-02-14 14:18:41 浏览数 (1)

前言

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

介绍

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

代码片段

JavaScript

代码语言：javascript复制
<!--页面防止容器标签 -->
<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/#必选配置

代码生成

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

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

代码演示

https html5 网络安全 编程算法

0 人点赞