网站移动端MP4视频无法正常播放问题求助

问题描述 #

将一段动画导出为MP4格式后，在网站移动端无法正常播放。手机浏览器元素审查工具显示所有属性正常，但点击视频封面后，视频直接关闭，无法按预期放大居中显示。尝试用JS实现播放逻辑后问题仍未解决，相关代码如下：

HTML代码 #

<div class="bakctage">                                  
    <div class="video__poster" tabindex="0">                                              
        <video id="video" class="video" poster="assets/img/постеры к подкастам/IMG_8742.JPG" src="assets/video/сладко.mp4" tabindex="0"></video>                                  
        <a href="#video" id="play__img" class="video__img"></a>                             
    </div>                             
    <div class="bakctage-info">                                 
        <a>Фриц Ланг - М</a>                             
    </div>                             
    <div class="backstage_data">                                    
        <a>Дата:</a> <a>29.06.2020</a>                                
    </div>                          
</div>

CSS代码 #

.video__poster video {
        width: 230px;
        height: 140px;
    }
.video__poster video {
    display: block;
    padding: 0.5%;
    cursor: pointer; 
}
    .video__poster[tabindex="0"] {
    cursor: zoom-in;
    }
    
    .video__poster video[tabindex="0"]:focus {
        position: fixed;
        z-index: 90;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: auto;
        max-width: 90%;
        height: auto;
        max-height: 90%;
        margin: auto;
        box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
        -webkit-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
    }

    .video__poster video[tabindex="0"]:focus,
    .video__poster video[tabindex="0"]:focus~* {
    cursor: pointer;  
    }

JS代码 #

const videos = document.querySelectorAll('.video');
videos.forEach(video => {
    const playButton = video.parentElement.querySelector('.video__img');
    playButton.addEventListener('click', () => {
        if (video.paused) {
            videos.forEach(otherVideo => {
                if (otherVideo !== video && !otherVideo.paused) {
                    otherVideo.pause();
                    otherVideo.parentElement.querySelector('.video__img').classList.remove('play__img-off');
                    otherVideo.removeAttribute("controls");
                }
            });

            video.play();
            playButton.textContent = '';
            playButton.classList.add('play__img-off');
            video.setAttribute("controls", "controls");
        } else {
            video.pause();
            playButton.textContent = '';
            playButton.classList.remove('play__img-off');
            video.removeAttribute("controls");
        }
    });
});

问题分析与修复方案 #

核心问题点 #

1. 锚点跳转冲突：<a href="#video">的锚点跳转行为会干扰视频的焦点状态，移动端点击后会触发页面定位，导致视频被“关闭”。
2. 移动端焦点适配差：仅依赖:focus伪类实现放大效果，移动端触摸行为的焦点逻辑和PC端不一致，无法稳定触发放大状态。
3. 状态管理不完整：缺少视频播放结束后的状态重置，以及点击背景退出放大的交互逻辑。

优化后的完整代码 #

HTML（移除锚点跳转）

<div class="bakctage">                                  
    <div class="video__poster" tabindex="0">                                              
        <video id="video" class="video" poster="assets/img/постеры к подкастам/IMG_8742.JPG" src="assets/video/сладко.mp4" tabindex="0"></video>                                  
        <a id="play__img" class="video__img"></a>                             
    </div>                             
    <div class="bakctage-info">                                 
        <a>Фриц Ланг - М</a>                             
    </div>                             
    <div class="backstage_data">                                    
        <a>Дата:</a> <a>29.06.2020</a>                                
    </div>                          
</div>

CSS（用自定义类替代:focus）

.video__poster video {
    width: 230px;
    height: 140px;
    display: block;
    padding: 0.5%;
    cursor: pointer; 
}

.video__poster[tabindex="0"] {
    cursor: zoom-in;
}

/* 自定义类控制放大状态，适配移动端触摸 */
.video__poster.video--expanded video {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 90%;
    margin: auto;
    box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 200px #000, 0 0 0 1000px rgba(0, 0, 0, .3);
}

.video__poster.video--expanded,
.video__poster.video--expanded * {
    cursor: pointer;  
}

JS（完善状态管理与交互）

const videos = document.querySelectorAll('.video');
videos.forEach(video => {
    const posterContainer = video.parentElement;
    const playButton = posterContainer.querySelector('.video__img');

    playButton.addEventListener('click', (e) => {
        e.preventDefault();
        
        if (video.paused) {
            // 暂停其他正在播放的视频
            videos.forEach(otherVideo => {
                if (otherVideo !== video && !otherVideo.paused) {
                    otherVideo.pause();
                    otherVideo.parentElement.classList.remove('video--expanded');
                    otherVideo.parentElement.querySelector('.video__img').classList.remove('play__img-off');
                    otherVideo.removeAttribute("controls");
                }
            });

            // 启动当前视频播放并放大
            video.play();
            playButton.classList.add('play__img-off');
            video.setAttribute("controls", "controls");
            posterContainer.classList.add('video--expanded');
        } else {
            // 暂停当前视频并恢复原状态
            video.pause();
            playButton.classList.remove('play__img-off');
            video.removeAttribute("controls");
            posterContainer.classList.remove('video--expanded');
        }
    });

    // 点击背景区域退出放大状态
    posterContainer.addEventListener('click', (e) => {
        if (e.target === posterContainer && !video.paused) {
            video.pause();
            playButton.classList.remove('play__img-off');
            video.removeAttribute("controls");
            posterContainer.classList.remove('video--expanded');
        }
    });

    // 视频播放结束后自动恢复状态
    video.addEventListener('ended', () => {
        playButton.classList.remove('play__img-off');
        video.removeAttribute("controls");
        posterContainer.classList.remove('video--expanded');
    });
});

修复说明 #

• 移除锚点的href属性，避免跳转干扰视频状态；
• 用自定义类video--expanded替代:focus，确保移动端触摸行为能稳定触发放大效果；
• 补充点击背景退出放大、视频结束后重置状态的逻辑，提升移动端交互体验；
• 统一播放/暂停时的UI与视频状态同步，避免出现状态不一致的问题。

内容的提问来源于stack exchange，提问作者Савва Трубаев