HLS Stream Embed

[Omar G.]

The following will allow your users to embed HLS stream videos in their posts.

Regular Expression (regex site):

\[m3u8\](?i)\b((?:[a-z][\w-]+:(?:/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))\[/m3u8\]

Replacement:

<video id="video" width="800" height="600" controls autoplay 
class="videoCentered"></video>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var  hls = new Hls({ autoStartLoad:false });
    hls.loadSource('$1');
    hls.attachMedia(video);
 hls.startLoad(1);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
  hls.startLoad(20);
      video.play();
  });
 }
</script>

Test Value:

[m3u8]https://nn.geo.joj.sk/live/hls/jojplus-360.m3u8[/m3u8]

To allow users to set auto play and mute options you will need to adapt the code.

[DJMOKHTAR]

I tested it but I couldn't play anything on the forum ( its ok on admin cp) . i checking the page source . the $1 can't loading ( hls.loadSource('') ) .
its my page source :

	<div class="post_body scaleimages" id="pid_135408"><video id="video" width="800" height="600" controls autoplay <br />
class="videoCentered"></video><br />
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script><br />
<script><br />
  if(Hls.isSupported()) {<br />
    var video = document.getElementById('video');<br />
    var  hls = new Hls({ autoStartLoad:false });<br />
    hls.loadSource('');<br />
    hls.attachMedia(video);<br />
 hls.startLoad(1);<br />
    hls.on(Hls.Events.MANIFEST_PARSED,function() {<br />
  hls.startLoad(20);<br />
      video.play();<br />
  });<br />
 }<br />
</script>

[Omar G.]

What is the URL you used? Try the following as the regular expression.

\[m3u8\](https?\://[^\r\n"<>&]+?)\[/m3u8\]

[DJMOKHTAR]

What is the URL you used? Try the following as the regular expression.

\[m3u8\](https?\://[^\r\n"<>&]+?)\[/m3u8\]

I use this :

https://dmu3sqri.rocketcdn.com/kraldijital-akustiktv.smil/chunklist_b2328000.m3u8

I think the problem is from javascript handle . because there is an error
   
but it is strange why It doesn't problem with admin panel !

[Omar G.]

It is weird because it should output the URL regardless of the JS not working. If the regex isn't recognizing the URL inside the [m3u8] tag then it should output nothing.

[Omar G.]

There seems to be some issues with the code itself. Get a new HLS library, one that doesn't rely on IDs for starters.

[DJMOKHTAR]

Can anyone solve this problem?

[Crazycat]

The content of the script must be in a single line:

<video id="video" width="800" height="600" controls autoplay class="videoCentered"></video>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
<script>if(Hls.isSupported()) {var video = document.getElementById('video'); var  hls = new Hls({ autoStartLoad:false }); hls.loadSource('$1'); hls.attachMedia(video); hls.startLoad(1); hls.on(Hls.Events.MANIFEST_PARSED,function() { hls.startLoad(20); video.play(); }); }</script>

If not, <br /> are added at each end of line (nl2br), causing JS errors.

[Kiddo Monster]

I got error like that.

<error>
	<dateline>1641742453</dateline>
	<script>inc/class_parser.php</script>
	<line>2016</line>
	<type>512</type>
	<friendly_type>User Warning</friendly_type>
	<message>Parser output validation failed.
array (
  'sourceHtmlEntities' => 'Content Texts

[m3u8]Video URL[/m3u8]',
  'outputHtmlEntities' => 'Content Texts
&lt;br /&gt;
&lt;video id=&quot;video&quot; align=&quot;center&quot; controls autoplay class=&quot;d-grid mx-auto&quot;&gt;&lt;/video&gt;&lt;br /&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/hls.js/latest/hls.js&quot;&gt;&lt;/script&gt;&lt;br /&gt;
&lt;script&gt;if(Hls.isSupported()) {var video = document.getElementById(\'video\'); var  hls = new Hls({ autoStartLoad:false }); hls.loadSource(\'https://url.m3u8\'); hls.attachMedia(video); hls.startLoad(1); hls.on(Hls.Events.MANIFEST_PARSED,function() { hls.startLoad(20); video.pause(); }); }&lt;/script&gt;',
  'errors' => 
  array (
    0 => 
    LibXMLError::__set_state(array(
       'level' => 3,
       'code' => 41,
       'column' => 43,
       'message' => 'Specification mandate value for attribute controls',
       'file' => '',
       'line' => 3,
    )),
    1 => 
    LibXMLError::__set_state(array(
       'level' => 3,
       'code' => 65,
       'column' => 43,
       'message' => 'attributes construct error
',
       'file' => '',
       'line' => 3,
    )),
    2 => 
    LibXMLError::__set_state(array(
       'level' => 3,
       'code' => 73,
       'column' => 43,
       'message' => 'Couldn\'t find end of Start Tag video line 3',
       'file' => '',
       'line' => 3,
    )),
    3 => 
    LibXMLError::__set_state(array(
       'level' => 3,
       'code' => 76,
       'column' => 83,
       'message' => 'Opening and ending tag mismatch: root line 1 and video',
       'file' => '',
       'line' => 3,
    )),
    4 => 
    LibXMLError::__set_state(array(
       'level' => 3,
       'code' => 5,
       'column' => 83,
       'message' => 'Extra content at the end of the document',
       'file' => '',
       'line' => 3,
    )),
  ),
)</message>
	<back_trace>#0  errorHandler->error() called at [/inc/class_parser.php:2016]
#1  postParser->validate_output() called at [/inc/class_parser.php:1957]
#2  postParser->output_allowed() called at [/inc/class_parser.php:284]
#3  postParser->parse_message() called at [/syndication.php:206]
</back_trace>
</error>