小程序一页显示多个视频video，细节交互优化处理

最新推荐文章于 2023-12-05 21:22:45 发布

原创

最新推荐文章于 2023-12-05 21:22:45 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

这篇博客详细介绍了如何在微信小程序中实现视频播放的优化和控制，通过动态显示和隐藏video标签来避免一次性加载过多资源导致的卡顿问题。在点击播放视频时，通过关闭上一个播放的视频并创建新的视频上下文来确保一次只播放一个视频。此外，展示了具体的页面结构和JavaScript代码实现，以及实际小程序运行效果。

1、页面部分代码

    <view class="new-list" wx:for="{
  
  {videoList}}" wx:for-index="i" wx:for-item="item" wx:key="i">

      <view class="video-wrap">
        <!-- 视频展示海报，先不去显示video ,通过点击海报，显示当前的video标签，播放当前的视频，这样做的目的是节流，一开始加载很多video 标签的话会加载很慢，有点卡顿，所以点击哪个就是显示哪个video标签，再去加载当前标签视频资源 -->

        <view 
        class="video-wrap-img" 
        wx:if="{
  
  {!item['isPlay']}}"
        data-id="id_{
  
  {item.data.id}}" 
        data-index="{
  
  {i}}"
        bindtap="playVideo"
        >
        <!-- 海报 -->
          <image 
          class="poster"
            src="{
  
  {item.data.cover.feed}}">
          </image>
          
        </view>

        <!-- 视频 -->
        <video class="video" wx:if="{
  
  {item['isPlay']}}"
          show-play-btn="{
  
  {true}}" 
          controls="{
  
  {true}}"
          autoplay="{
  
  {true}}"
          dura