如何通过检测html标记中的Web或移动设备来添加属性(How to add an attribute by detecting web or mobile devices in html tag)

如何通过检测html标记中的Web或移动设备来添加属性(How to add an attribute by detecting web or mobile devices in html tag)

我的网站上有一个视频标签

<video id="html_video" style=" width:100%;" muted autoplay id="bgvid"> <source src="video/newvideo.mp4" type="video/mp4"> </video>

它的工作正常，没有网络控制。 但在iPad Safari中没有检测到autoplay 。 所以我在safari iPad中添加了controls属性来显示播放按钮。

代码变成了

<video id="html_video" style=" width:100%;" controls muted autoplay id="bgvid"> <source src="video/newvideo.mp4" type="video/mp4"> </video>

现在控件可用于ios和web。 点击播放按钮可在iPad中播放视频。

我的问题是，是否可以将此controls属性仅添加到safari iPad和网站中，该属性不是百分比？

欣赏任何类型的答案。

提前致谢

I have one video tag in my website

<video id="html_video" style=" width:100%;" muted autoplay id="bgvid"> <source src="video/newvideo.mp4" type="video/mp4"> </video>

Its working fine without controls in web . But in iPad safari is not detecting autoplay. So I added controls attribute to show play button in safari iPad.

code becomes

<video id="html_video" style=" width:100%;" controls muted autoplay id="bgvid"> <source src="video/newvideo.mp4" type="video/mp4"> </video>

Now the controls is available for ios and web. clicking play button plays the video in iPad.

My question, Is it possible to add this controls attribute only to safari iPad and in website the the attribute not percent in it?

Appreciating any kind of answers.

thanks in advance

最满意答案

我通过在页面中添加JavaScript来成功实现，如下所示

以供参考

$(document).ready(function () { if( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) ){ document.getElementById('html_video').setAttribute("controls","1"); } else { document.getElementById('html_video').removeAttribute("controls","1"); } });

谢谢。

I have succeeded in it by adding JavaScript in the page as follows

For reference

$(document).ready(function () { if( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) ){ document.getElementById('html_video').setAttribute("controls","1"); } else { document.getElementById('html_video').removeAttribute("controls","1"); } });

Thank you.