视频（音频）播放组件—

安装

npm install xgplayer

使用

<template><div><!-- 视频组件位置 --><div id="video"></div></div>
</template><script lang="ts">
import { defineComponent, onMounted } from "vue";
//视频播放组件
import Player from "xgplayer";
export default defineComponent({setup() {onMounted(() => {//创建播放器对象new Player({id: "video",//视频地址url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",//尺寸width: 600,height: 340,//播放器音量volume: 0.6,//播放图poster:"https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",//传入倍速可选数组playbackRate: [0.5, 1, 1.5, 2],});});},
});
</script><style scoped lang="scss">
</style>

效果

更多内容见官方文档： 西瓜播放器

视频（音频）播放组件——西瓜播放器相关推荐

xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件，内置解析器、也能节省流量
一个功能强大,符合国内视频播放业务的 web 视频播放组件,由西瓜视频技术团队官方出品. 关于西瓜播放器西瓜播放器 (xgplayer.js) 不是一个看片软件,而是一个 Web 开发上的视频播放器 ...
vue西瓜播放器xgplayer-vue实现视频倍速播放，自定义进度条样式
介绍 npm网站:https://www.npmjs.com/package/xgplayer-vue 西瓜播放器官网:https://v2.h5player.bytedance.com/gettin ...
uniapp引入xgplayer(西瓜播放器)实现视频监控
开发背景最近有个需求,需要在app中展示对应站房的实时监控画面,因为uniapp原有的video组件功能比较少就考虑到引入西瓜播放器的视频组件开发准备因为是直播流就选择了flvjs, 项目安装x ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
android 视频+音频播放器Demo
程序主界面 MainActivity.java 1.主界面,头部是两个TextView(自定义类似指针效果),底部是ViewPager.ViewPager中每个页面对应的是一个Fragment.这样就 ...
HTML5 音频视频的使用以及自定义播放器
一.音频 audio:音频 src:播放的音频文件的路径 controls:音频播放器的控制面板 autoplay:自动播放 loop:循环 <audio src="../mp3/xx ...
vue - vue中使用西瓜播放器xgplayer
1,安装 # 最新稳定版 $ npm install xgplayer对于已有项目也可以通过 CDN 引入,代码如下: <script src="//unpkg.byted-stati ...
React使用西瓜播放器
西瓜播放器 | 快速上手概述西瓜播放器是一个Web视频播放器类库,它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件.更重要的是它不只是在 UI 层有灵活的表现,在功能上也做了大胆的尝试:摆 ...
vue使用西瓜播放器
先上两个网址 xgPlayer-npm: https://www.npmjs.com/package/xgplayer 西瓜播放器示例: https://v2.h5player.bytedance. ...

视频（音频）播放组件——西瓜播放器

视频（音频）播放组件——西瓜播放器相关推荐

最新文章

热门文章