小程序轮播视频插件

最新推荐文章于 2024-08-26 09:45:17 发布

茅十八围城—嘤嘤怪

最新推荐文章于 2024-08-26 09:45:17 发布

阅读量726

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_41212752/article/details/90637077

版权

本文介绍了如何在小程序中实现轮播视频插件，重点解决了视频播放与轮播图冲突的问题，提供了WXML、WXSS和JS的相关代码示例。

摘要由CSDN通过智能技术生成

小程序轮播视频插件

解决视频和轮播冲突

WXML

<view class="test_box">
      <swiper indicator-dots="{
  {indicatorDots}}" autoplay="{
  {autoplay}}" interval="{
  {interval}}">
        <swiper-item>
          <view class='course-pannle-item' wx:for-index="idx">
            <view class='video-item'>
              <video wx:if='{
  {idx==playIndex}}' id='video{
  {idx}}' autoplay='{
  {true}}' show-center-play-btn="{
  {false}}" src='{
  {video}}' controls="true" objectFit="cover" bindplay='test' bindpause='test2'>
              </video>
              <image class='video-cover' wx:if='{
  {idx!=playIndex}}' mode='widthFix' src=&#