Display live information on Smart TV via Web browser

Question

User426496937 posted

Hello guys,

I need some opinions here regarding a project that I am about to develop. Before going in to the details, I would like to apologize if my question were too general or maybe
to some of the expert it may sound silly. I am a new fresh-graduated student who just work as a software engineer in one of a company in Malaysia. I am still new and I may have lots of tons more to learn.By the way you guys can just call me Faiz.

First of all, what I am about to do is create a web page to play power point slide show and displaying it on Smart TV via web browser. Currently how I am going to do it is by converting the power point file into a video file and play in on my web page in full screen. The video file will be stored inside the system directory.

My first question would be, is it wise to do it like that? Please advice me if my method will be burden to my server or maybe other thing that I will need to consider that I might not know.

I was set the loop inside the video tag so that it will be playing over and over again. This is where my second problem rise. Whenever user change/replace the source video with new video file. The web browser still playing the old video file. It will only play the latest video after I go and grab the remote control and refreshed/reload the page manually.

<div class="fullscreen-bg">
        <video id="myVideo" muted loop autoplay class="fullscreen-bg__video">
            <source src="../Slide/SlideMP4/LSI/LSI.mp4" type="video/mp4">
        </video>
</div>

Currently I solve this issue my using javascript. What I do currently is by eliminate the loop inside the video tag and redirecting to the same page.

<div class="fullscreen-bg">
        <video id="myVideo" muted autoplay class="fullscreen-bg__video">
            <source src="../Slide/SlideMP4/LSI/LSI.mp4" type="video/mp4">
        </video>
</div>

<script type='text/javascript'>
        document.getElementById('myVideo').addEventListener('ended', myHandler, false);
        function myHandler(e) {
            window.location.href = '../Slide/SlideshowLSI.aspx'; 
        }
</script>

I think that my current method were not suitable or maybe will bring some burden to the server. Correct me if I am wrong guys. By doing this also, I had face another problem. When there is disconnection or time out problem during high load. I will need to go grab the remote control again to reopen the page or reload/refresh the web page.

Anyone please suggest me on how could I fix these problems. Please do comment above if my explanation were quite unclear.

Thank you guys :)

Answer 1

User-893317190 posted

Hi Hamizan,

You could change the video's src attribute directly using js. Through it , you don't need reload the whole page, this may improve performance.

There is also an api for fullscreen. Please pay attention that the  method webkitRequestFullScreen only applies to chrome.If you want to apply to all the browser, you could refer to https://www.w3schools.com/jsref/met_element_requestfullscreen.asp

 <form id="form1" runat="server">
        <div>
            <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4" autoplay="autoplay" controls="controls" loop="loop" ></video>
            <input type="button" id="btn"  value="change" />   <input type="button" id="fullScreen"  value="fullScreen" />
        </div>
       
    </form>
     <script>
         var video = document.getElementById("video");
         document.getElementById("btn").onclick = function () {
              video.src = "http://www.w3school.com.cn/i/movie.ogg";
         }
         document.getElementById("fullScreen").onclick = function () {
             video.webkitRequestFullScreen();
         }
        </script>

You could also consider using load() method to reload the video. https://www.w3schools.com/tags/ref_av_dom.asp

If  there is error in loading your video , you could  listen  video's error event and deal with it in the event.The link above https://www.w3schools.com/tags/ref_av_dom.asp also contains the video's event,you could make a reference.

Best regards,

Ackerly Xu