如何解决Video.js与HTML原生播放器控件重复显示问题

控件重复显示的核心原因有两个：一是HTML的video标签自带controls属性会触发浏览器原生控件，二是JS代码中手动开启了原生控件。以下是具体修复方案：

1. 移除HTML标签中的原生controls属性 #

直接删除video标签里的controls属性，让Video.js全权管理播放器控件：

<video class="img-fluid myVideo video-js" id="content_video{{ $video_list->id }}" preload="auto" controlsList="nodownload"
    data-video-id="{{ Crypt::encrypt($video_list->id) }}">
    @if (Auth::check())
        @if ($video_list->membershipplan_id == 2 || ($video_list->membershipplan_id == 1 && $video_list->hasPaid == 1) || ($video_list->is_subscription_valid == 1) || ($checkUserSubscriptionPlan == 1))
        <source src="{{ $video_list->full_video_url }}" type="video/mp4" class="full-video">
        @else
        <source src="{{ $video_list->short_video_url }}" type="video/mp4" class="short-video">
        @endif
    @else
        <source src="{{ $video_list->short_video_url }}" type="video/mp4" class="short-video">
    @endif
</video>

2. 删除JS中手动开启原生控件的代码 #

去掉video.onplay事件里的video.controls = true语句，避免再次触发原生控件：

video.onplay = function () {
    console.log('3');
    playing.push(video);
    // 移除该行：video.controls = true;
    // 触发观看记录上报
    registerView(video);
};

3. 修正Video.js IMA配置的ID问题 #

当前代码中options.id写死为content_video，会导致多视频播放器配置冲突，改为动态获取当前视频的ID：

var options = {
    id: video.id,  // 使用当前视频元素的真实ID
    adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator='
};

完成以上修改后，页面将只显示Video.js的播放器控件，原生控件不再重复出现，同时Google AdSense广告功能保持正常。

内容的提问来源于stack exchange，提问作者Vinod