视频播放--vue3+西瓜播放器
实现方式非常简单,只需三步:安装、DOM占位、实例化即可完成播放器的使用
安装
npm install xgplayer
引入
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";
注意:一定要引入样式,否则会造成样式混乱(效果很恐怖)
使用
1.提供占位符
<div id="mse"></div>
2.实例化
在一进入页面就需要显示,在vue3中我们可以将其放在onMounted中
onMounted(() => {
new Player({
id: "mse",
lang: "zh", //设置中文
width: 500,
height: 500,
screenShot: true, //截图
//视频源
url: "http://vjs.zencdn.net/v/oceans.mp4",
//封面
poster:
"https://th.bing.com/th/id/OIP.JBYP-vrDgm9mTJIjFtHn1wHaE7?rs=1&pid=ImgDetMain",
//画中画
pip: true,
});
});
具体的一些配置可以看西瓜官网,配置很多
3.运行代码
运行代码,我们就可以发现视频已经被渲染出来了,可以播放了
看一下效果
封面是随便从网上找的...
4.结束
推荐几个视频源,省得各位写的时候再从网上找了
- http://vjs.zencdn.net/v/oceans.mp4
- https://media.w3.org/2010/05/sintel/trailer.mp4
算了,就这两个吧...
原文地址:https://blog.csdn.net/weixin_73098736/article/details/140692533
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!