微信小程序实现视频功能（一）：视频上传

最新推荐文章于 2025-04-14 11:21:30 发布

12程序猿

最新推荐文章于 2025-04-14 11:21:30 发布

阅读量2.1w

点赞数 17

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_26383975/article/details/107311004

版权

本文介绍了微信小程序中实现视频上传的功能，通过调用微信小程序的API，详细讲解了video.wxml、video.js、video.wxss和video.json四个部分的代码实现，提供了一步一步的操作流程。

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

微信小程序开发实现视频的上传（官方提供了API，基本直接调用就可以了）

一、效果图：

在这里插入图片描述

二、代码实现

1. video.wxml

<!--pages/video/video.wxml-->
<view class="main">
    <view class="playerInfo">
        <view class="video" wx:if="{
   {clickFlag}}">
            <image class="videoContent" wx:if="{
   {poster}}" src="{
   {poster}}" mode="aspectFill" bindtap="chooseVideo"/>
            <view class="videoContent"  wx:else bindtap="chooseVideo" >
                <image class="playImg" src="../images/uploadVideo.png" mode="aspectFill"/>
            </view>
        </view>
        <view class="video" wx:else>
            <image class="videoContent" wx:if="{
   {poster}}" src="{
   {poster}}" mode="aspectFill"/>
            <view class="videoContent"  wx:else>
                <image class="playImg" src="../images/uploadVideo.png" mode="aspectFill"/>
            </view>
        </view>
    </view>
    <view class="footerbtn">
        <button type="default" style="width:40%;" bindtap = "chooseVideo" wx:if="{
   {clickFlag}}">上传视频</button>
        <button type="default" style="width:40%;color:#cccccc;" wx:else>上传视频</button>
        <button type="primary

最低0.47元/天解锁文章