为什么移动端的无法播放

我将视频上传后，PC端能正常自动播放，但是移动端却无法正常自动播放，点击播放按钮却没有反应，下面是form代码和JS代码：

<form class="layui-form layui-form-pane" action="" method="post" enctype="multipart/form-data" onsubmit="return check()">

    <div class="yzm_explain layui-bg-orange">禁止上传违法、色情、广告视频，情节严重者将会被封号处理。</div>

    <!-- 上传视频 -->

    <div class="layui-form-item">

        <div class="yzm_upload">

            <!-- 视频预览 -->

            <video id="videoPreview" controls style="display:none; width: 100%; height: 86%;" playsinline muted preload="auto">

                您的浏览器不支持视频标签。

            </video>

            <!-- 视频选择 -->

            <div>

                <input type="file" id="videoFile" name="video_file" accept="video/*" onchange="previewVideo()">

            </div>

            <p>支持MP4、AVI、MOV等格式，最大不能超过100MB。</p>

        </div>    

    </div>                                        

    <!-- 提交按钮 -->

    <div class="layui-form-item">

        <input type="submit" name="dosubmit" class="layui-btn" value="提交">

    </div>                        

</form>

下面是JS代码：

<script>

// 预览视频

function previewVideo() {

    var videoFile = document.getElementById('videoFile').files[0];  // 获取上传的文件

    var videoPreview = document.getElementById('videoPreview');

    // 检查文件类型

    var validTypes = ['video/mp4', 'video/avi', 'video/mov', 'video/wmv', 'video/flv'];

    if (!validTypes.includes(videoFile.type)) {

        alert('仅支持MP4、AVI、MOV等视频格式。');

        return;

    }

    // 检查文件大小

    var maxSize = 100 * 1024 * 1024;  // 100MB

    if (videoFile.size > maxSize) {

        alert('文件大小超过100MB，请选择较小的文件。');

        return;

    }

    // 设置视频预览

    var videoURL = URL.createObjectURL(videoFile);

    videoPreview.src = videoURL;

    videoPreview.style.display = 'block';  // 显示视频预览

    // 自动播放设置

    videoPreview.play().catch(function(error) {

  console.log('自动播放失败，等待用户点击播放...');

    });

}

</script>

求大神指点一下，感谢！