原生html封装组件,简单的封装 原生视频播放器 video 插件

本文介绍了一个基于HBuilderx的VideoPlayer组件封装方案,通过简单的API即可实现视频播放器的快速部署,支持在线打包并提供了丰富的配置选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通过对官方的 VideoPlayer 视频播放器组件简直封装下方便使用plus.video.VideoPlayer

开发工具:HBuilder x  支持在线打包实现。

5180b7c6cc9b3e8a8bbae22888bf5b6b.png

在有需要的页面引入 videoplus.js

html页面

//实例化插件

var video=new VideoPlus("plusvideo",

{

url:"http://onehk-1251146759.cosgz.myqcloud.com/video_171129.mp4", //支持本地视频和网络视频,格式MP4

img:"https://zs.manyiwl.com/uploads/image/20171231/1514657764.jpg", //网络视频截图封面

autoplay:false, //是否自动播放视频

isMobile:true, //是否开启当处于移动网络时,提示用户是否继续播放视频。,不支持浏览器环境

isFull:false, //是否点击播放就全屏显示

isFullbutton:true, //是否显示全屏按钮

prompt:function() //当开启isMobile时,这里可以写提示用户的内容,h5+环境才有效

{

mui.confirm('你当前处于移动手机网络将会消耗手机流量,是否继续播放?', '提示',["取消","确定"], function(e)

{

if(e.index == 1)

{

video.play();

}

});

}

});

需要切换视频播放时video.getplayUrl({

url:"http://images.pintuotuo.com/mp4.mp4", //视频链接

img:"https://zs.manyiwl.com/uploads/image/20171231/1514657764.jpg", //封面截图

});

附件是 HBuilder x 的工程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值