Was soll ich tun, wenn das Video-Tag in HTML5 nicht abgespielt werden kann?

Lösung für das Problem, dass das Video-Tag von HTML5 nicht abgespielt werden kann: 1. Verwenden Sie den Video-Screenshot, um eine Wiedergabeschaltfläche zu erstellen und die ursprüngliche Position des Videos einzunehmen. 2. Überwachen Sie das Klickereignis der besetzenden Schaltfläche und verwenden Sie „Video“. .play()"; 3. Einfach das Platzhalterbild ausblenden und laden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, DELL G3-Computer

Was soll ich tun, wenn das Video-Tag von HTML5 nicht abgespielt werden kann?

IOS-HTML5-Video-Tag kann nicht abgespielt werden

h5-Video-Tag kann nicht in UIwebview abgespielt werden, Safari kann,

Einige Telefone können, einige Telefone nicht

Es stimmt mit video.js überein, nicht Ich mag es nicht mehr. Führen Sie ein Kompatibilitätspaket ein. Wenn Sie ein besseres Erlebnis haben möchten, wird empfohlen, https://videojs.com/ zu verwenden. Wenn Sie das Prinzip selbst erleben möchten, können Sie den Democode am Ende kopieren des Artikels und führen Sie ihn aus.

Die herkömmliche Methode besteht darin, Videos in HTML zu schreiben. Tags können zum Abspielen angeklickt werden

<video src="xxx.mp4" controls poster="url?vframe/jpg/offset/5" preload="load"></video>
// ?vframe/jpg/offset/5  这个是七牛接口，取截图用的，5就是第5秒截图

ABER so geschrieben funktioniert es nicht unter IOS 10.3.2/3 11.x.x. iPhone 6/6p 7 und andere Testgeräte, aber es kann auf persönlichen Mobiltelefonen verwendet werden, und einige Mobiltelefone funktionieren nicht.

Nach der Änderung:

Schritt 1: Verwenden Sie den Video-Screenshot, um eine Wiedergabeschaltfläche zu erstellen, die die ursprüngliche Position des Videos einnimmtSchritt 2: Überwachen Sie das Klickereignis der Platzhalterschaltfläche, verwenden Sie video.play(), und Sie können es ansehen. Es gibt eine Anfrage für das Video und es wird geladen

Schritt 3: Es gibt ein Versprechen für das Ladevideo, dann verstecken Sie einfach das Platzhalterbild und laden

Tipps:

Verschiedene Mobiltelefone / Das System verfügt über unterschiedliche Anforderungsbereiche, die im Allgemeinen in 3-5.206 Anforderungen unterteilt sind.

• console.time("loading milliseconds"); Sie können die Ladezeit sehen, die im Grunde die gleiche ist, die Charles erfasst hat.

• Verschiedene Mobiltelefone/Systeme haben auch unterschiedliche Leistungen. Einige werden sofort nach einem Klick zurückgegeben, und andere müssen warten, bis das Video vollständig geladen ist, bevor sie zurückkehren.

• Die Eigenschaften des Videos DOM kann ermitteln, wie viel aktuell geladen ist und wie hoch der Gesamtbetrag ist. Teilen Sie ihn durch eins. Die spezifischen Attribute können angezeigt werden> https://developer.mozilla.org/zh-CN/docs/Web/HTML/. Element/Video

• Online-Adresse: http://m.soyoung ...

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Video-Tag in HTML5 nicht abgespielt werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!