Page 1 of 1

Video Auto Play

Posted: Thu Apr 11, 2024 11:40 am
by kevin_Webbers
Good Afternoon,

I have entered 4 different Videos into my Hesk Knowledgebase under one article. but the issue I have is all 4 videos play straight away.
How can I stop this and need the user to click Play on each video?
The Video Code I have is: (removed Source for security)
<p><iframe src="https://localhost/test.mp4" width="674" height="706" frameborder="0" allowfullscreen=""></iframe></p>

Re: Video Auto Play

Posted: Thu Apr 11, 2024 4:00 pm
by Klemen
This is not something Hesk-specific. I would answer if I knew the answer, but unfortunately, I don't.

Re: Video Auto Play

Posted: Thu Apr 11, 2024 4:38 pm
by shddcit
kevin_Webbers wrote: Thu Apr 11, 2024 11:40 am Good Afternoon,

I have entered 4 different Videos into my Hesk Knowledgebase under one article. but the issue I have is all 4 videos play straight away.
How can I stop this and need the user to click Play on each video?
The Video Code I have is: (removed Source for security)
<p><iframe src="https://localhost/test.mp4" width="674" height="706" frameborder="0" allowfullscreen=""></iframe></p>
Good afternoon

To solve this problem, you need to add an 'allow' attribute with the value 'autoplay' to the 'iframe' tag and set its value to 'false'. This will disable automatic video playback. Additionally, I would added a 'muted' attribute set to 'true' so that the video is muted when loading.

This is what your video code should look like:

Code: Select all

<p><iframe src="https://localhost/test.mp4" width="674" height="706" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen autoplay="false" muted= "true"></iframe></p>
Note that the 'allow' attribute is required for compatibility with some browsers such as Safari.

If I'm wrong, please indicate where the mistake was.

Re: Video Auto Play

Posted: Thu Apr 11, 2024 4:44 pm
by shddcit
Klemen wrote: Thu Apr 11, 2024 4:00 pm This is not something Hesk-specific. I would answer if I knew the answer, but unfortunately, I don't.
I believe that this concerns the extended TinyMCE editor, which you use in the Hesk system and, in theory, does not relate to questions about Hesk technical support.

Re: Video Auto Play

Posted: Mon Apr 15, 2024 7:47 am
by kevin_Webbers
I would like to thank you so much for your help on this matter.
I though it was Hesk, but looking it seems more php/html script.
But thank you for your pointer, unfortunately when putting in the code, it removes all the allow=autoplay
here is the Code I have put in:
<p><iframe src="https://server/extras/SFB_Users.mp4" width="1058" height="722" frameborder="0" allow="autoplay" allowfullscreen="true" autoplay="false" muted= "true"></iframe></p>

This is what it changes it to:
<p><iframe src="https://server/extras/SFB_Users.mp4" width="1058" height="722" frameborder="0" allowfullscreen="true"></iframe></p>

Re: Video Auto Play

Posted: Mon Apr 15, 2024 2:03 pm
by Klemen
Iframes are tricky to do right, but here are some guidelines that should help:

You will need to allow iframes in both TinyMCE and HTMLPurifier.

1. backup all files before making changes

2. make changes using a powerful editor like the free Notepad++. Do not use Microsoft Notepad.

3. first, you need to set up TinyMCE to allow iframes. In file /inc/tiny_mce/tinymce.inc.php find

Code: Select all

        });
    </script>
and just ABOVE that code add

Code: Select all

,extended_valid_elements : "iframe[class|src|border=0|alt|title|name|width|height|frameborder|allow|allowfullscreen|autoplay|muted]"
4. second, you need some tricks for the HTMLPurifier library to accept iframes. Open file /inc/htmlpurifier/custom/heskIframe.inc.php and:

Change

Code: Select all

return '<iframe ' . $matches[1] . $extra . '></iframe>';
to

Code: Select all

return '<iframe ' . $matches[1] . $extra . ' frameborder="0" allow="autoplay" allowfullscreen="true" autoplay="false" muted= "true"></iframe>';
Change

Code: Select all

return '';
to

Code: Select all

return '<iframe src="'.$matches[1].'" frameborder="0" allow="autoplay" allowfullscreen="true" autoplay="false" muted= "true"></iframe>';
5. Upload the modified files to your help desk and test.

You may need to customize the above code additionally if you wish to pass further attributes etc. This is not something I will help with.

Be warned, though, that any changes you make, you do it at your own risk and only allow people you trust to submit HTML code to your Hesk.