Sample pHpRUnner Responsive Video Display

Sample Css Video Display

Sample Stream Link

 <STYLE>
      input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 4px 3px 0px;
      box-sizing: border-box;
      border: 1px solid #555;
      outline: none;
      }
      input[type=text]:focus {
      background-color: lightblue;
      }
    </STYLE>
    <STYLE>
      video {
      width: 100%;
      height: 210px;
      border: 0px solid;
      border-radius: 12px;
      max-width: 100%;
      background-position: bottom;
      background-color: black;
      }
      @media screen and (max-width: 500px) {
      video {
      width: 100%;
      height: 160;
      border: 0px solid;
      border-radius: 12px;
      max-width: 100%;
      background-position: bottom;
      background-color: black;
      }
    </STYLE>



Sample Link Streaming m3u8 and Mp4 View

if (strpos($value, 'http') !== false) {
   // $value =  'link';
 
    $value ="
    <link href=\"video-js.css\" rel=\"stylesheet\">
<video id=videoid width=270 height=200 class=\"video-js vjs-default-skin\" controls>
  <source src='".$value."'type=\"application/x-mpegURL\">
  <source src='".$value."'type=\"video/mp4\">
</video>
<script src=\"video.js\"></script>
<script src=\"videojs.hls.min.js\"></script>
<script>
var player = videojs('videoid');
player.play();
</script>


<div>
<input type=\"text\"value=".$data["contenturl"]." readonly>
<div>
";



}
else {
$value = "".$value;

$value ="

<video class=\"video\" width=\"300\" height=\"200\" poster=\"v.jpg\" autoplay loop muted=\"\" controls>
<source src='".$value."' type=\"video/mp4\">
Your browser does not support the video tag.
</video>
<div>
<input type=\"text\"value=".$data["contenturl"]." readonly>
<div>
";
}