Wie kann ich den Stil des Videoplayers anpassen?

In diesem Artikel erfahren Sie, wie Sie den Videoplayer-Stil anpassen. Ich hoffe, er kann Ihnen helfen.

DIY

Dieser Artikel basiert auf der HTML5-Video-API zur Anpassung des Webvideo-Player-Stils.

Eigentlich ist der native Video-Tag-Stil ganz nett, aber das visuelle Erlebnis ist bei jedem anders, sodass es Zeiten geben wird, in denen es notwendig ist, den nativen Stil zu ändern.

Dann etwas Make-up darauf auftragen. Leichtes Make-up, leichtes Make-up.

[Code hier]

<video class="ppq-video video-hidden" src="https://zhuanjia4v-1252768022.cossh.myqcloud.com/hualv/437D2592787911E8862FD89EF30F789D.mp4"
       webkit-playsinline="true"
       playsinline="true"
       x-webkit-airplay="allow" // 使video支持ios的AirPlay功能，需要终端支持
       x5-playsinline 
       poster="https://img02.sogoucdn.com/app/a/200692/42345752787911E8BB8FD89EF30F789D?m-wh=960*540" 
    ></video>

Fügen Sie das Playsinline-Attribut hinzu:

webkit-playsinline="true"
playsinline="true"
x5-playsinline

Mit diesem Playsinline-Attribut kann das Video ohne Verwendung in die Browser-Webansicht integriert werden Der vom Browser selbst implementierte Videostil, aber einige Browser erkennen dies nicht und sind gezwungen, ihren eigenen zu verwenden. Wenn Sie beispielsweise UC nutzen möchten, benötigen Sie es, um eine Whitelist für Sie zu konfigurieren. Einige Browser unterstützen es einfach nicht und verfügen nicht einmal über eine Whitelist.

Informationen zu diesen Eigenschaften von Tencents x5 und anderen Browsern finden Sie im Artikel [Tencent Browsing Service-H5 Same Layer Player Access Specification]

Use

$(selector).initVideoPlayer();  // select 为video元素

Play Der Tool-Stil verfügt über ein separates CSS im Demo-Ordner des Git-Code-Projekts. Sie können es je nach Bedarf nach Ihren Wünschen oder nach den Wünschen Ihres Produktmanagers ändern.

Verwandte Empfehlungen:

vue-video-player Erstellen Sie einen benutzerdefinierten Player

vue-video-player Ausführliche Erklärung von die Schritte zum Anpassen des Players

Das obige ist der detaillierte Inhalt vonWie kann ich den Stil des Videoplayers anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!