为什么视频js endcard插件会在播放器中添加本机控件

Why does the video-js endcard plugin add native controls to the player?

本文关键字：播放器 添加 本机 控件 视频 js endcard 插件 为什么      更新时间：2023-09-26

Endcard是视频js html5视频播放器的一个插件，它在视频末尾插入链接。（尾卡上的信息：https://github.com/theonion/videojs-endcard)。要插入尾卡，您只需要videojs.endcard.js，再加上一些样式css。

但是。。。问题是，在某些情况下，endcard会从视频中剥离videojs自定义控件，并用本机控件替换它们。示例。。。

  • 经典videojs视频，具有基本的videojs样式-http://www.casedasole.it/video/endcard/index.html
  • 相同的视频和插卡演示（在最后）-http://www.casedasole.it/video/endcard/2.html

请注意：

  • 看起来它只发生在手机上。在PC上，这两个视频都在Chrome、FF和IE中设置了videojs控件。

  • 这种情况并不总是发生在手机上——iPad上的Safari和Opera没有问题，但在iPad上的Chrome中，有时视频2有videojs控件，然后在刷新时有本地控件（当这种情况发生时，视频通常不会加载）。

  • 视频2总是"原生"的地方在谷歌Chrome开发者工具（PC）中——有时它看起来还可以，但重新加载后就不行了。使用开发工具，我看到在video 2的html（带有endcard的html）中，css类"vjs Using native controls"（意思是display:none for the videojs controls）正在添加到videodiv中。这并没有添加到Firefox web developer中生成的源代码中。

我测试了这两个文件，看看是什么原因导致了这种情况，并将其归结为视频2中html末尾的javascript。如果我删除它，播放器就会在Chrome（iPad）和Chrome开发工具中重新获得其风格的控件。

嗯，也许问题出在Chrome上？无论如何，有人知道冲突发生在哪里，为什么只发生在手机上，以及如何解决冲突吗？

这不是插件，而是播放器在第二页初始化的不同方式。播放器选项可以作为第二个参数传递给videojs函数：

var video = videojs('video', {"nativeControlsForTouch": false} );
相关文章：