Code to identify browser in Wordpress

Question

I need a code that identifies if the browser is Firefox and then runs a code block and otherwise runs another. The code block is HTML5 pure.

The code is to be used within Wordpress, so I believe only accept HTML, but if there is no other way it can be in PHP or Javascript.

---

Brother, I am using the wordpress module on a site of my own. What I want to do is the following: The site is a news portal. I put a player on my radio online. The code is as follows::

<iframe src="http://player.srvstm.com/player-barra/19378/000000" frameborder="0" width="100%" height="31"></iframe>

I realized that this player does not run in Firefox and wanted to put an alternative code only for it in Html5, this below:

<div id="player-html5" class="players">
<audio id="radios-player" controls="" preload="none" autoplay="" src="http://stm3.srvstm.com:19378/;"></audio>

I thought about using an IF in some language to identify the browser, but I do not know if it is the most viable solution.

The website is: www.planetariosdigital.com.br

Answer 1

Hello, to solve your problem my solution is with javascript. But for my code to work you need to make a small change to your iframe code, I need you to add an id, getting this way:

Original code:

<iframe src="http://player.srvstm.com/player-barra/19378/000000" frameborder="0" width="100%" height="31"></iframe>

Modified Code:

<iframe id="player" src="http://player.srvstm.com/player-barra/19378/000000" frameborder="0" width="100%" height="31"></iframe>

I need this id to be possible to manipulate the player on the page with javascript.

Now you must put this PHP code in functions.php of Wordpress, so that it adds the javascript code responsible for identifying if the internet user is in firefox.

If yes it will remove the current player and switch to the Html5 player.

PHP function:

 add_action('wp_footer', 'firefox_player_audio_javascript', 100);

function firefox_player_audio_javascript() {
echo "<script>if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
var iframe = document.getElementById('player');
var containeriframe = iframe.parentElement.parentElement.parentElement;
var audio = document.createElement('audio');
audio.id = \"radios-player\";
audio.setAttribute(\"controls\", \"\");
audio.preload = \"none\";
audio.setAttribute(\"autoplay\", \"\");
audio.src = \"http://stm3.srvstm.com:19378/;\";
iframe.remove();
containeriframe.appendChild(audio);
}</script>";
}

Remembering that to access the functions.php you go in:

Admin Panel of Wordpress Appearance Editor

On the right side -> You should find functions.php or in English Theme functions

Finally save the function at the end of the file and see the result:

Finally I hope it works, good luck!