HTML页面中移动设备上的不同视频属性答案

【问题标题】：Different video attributes on mobile in HTML pageHTML页面中移动设备上的不同视频属性
【发布时间】：2018-02-03 19:04:52
【问题描述】：

我有一个非常简单的 html 页面，它只托管一个视频。 controls 属性不存在，autoplay 存在。这会阻止电影在移动设备上播放（禁止自动播放，并且在没有控制的情况下无法启动）。

<video class="center" width="1280" height="720" loop autoplay="autoplay" ondblclick="makeFullScreen(this)" >

有没有办法使用属性或某些 javascript 来为移动设备和桌面设备提供不同的属性，例如通过使用 media 属性和对屏幕大小的限制？服务于不同页面的 PHP 解决方案也可以接受，但次优。

【问题讨论】：

标签： html video mobile

【解决方案1】：

有很多 JavaScript 函数可以检测客户端设备是移动设备还是桌面设备。您可以选择任何此类功能 (What is the best way to detect a mobile device in jQuery?) 之后你做一个简单的 if stmnt （如果设备是移动设备添加控制属性）或者，正如您所提到的，您可以使用 php 检测到这一点，并在 stmnt 时进行类似的操作

【讨论】：

我可以做if部分，不知道如何“添加”控制属性，你能演示一下吗？
我是用 jquery 做的。我相信这将是代码。（不知不觉你会把它放在 if 语句中 $('#elementId').attr('controls','on');