Design basic Teleprompter using HTML, CSS and JavaScript for free

A teleprompter, also known as an autocue, is a device that displays a script or speech text in front of a camera lens, allowing presenters or actors to read the text while maintaining eye contact with the camera. This tool is widely used in television broadcasting, public speaking, and video production to ensure smooth and confident delivery without the need to memorize the script.

Follow this video for complete guidance :

https://www.youtube.com/watch?v=yhU6JWcZqyw

Teleprompter using HTML, CSS and JavaScript Source Code

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
  body{
    background: #000;
    color:yellow;
    
    width: 50%;
    margin: 0 auto;
    margin-top:50px;
  }
  .header{
    height: 60px;
    background: #000;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99;
    border-bottom: 1px solid #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .content{
    margin-top:100px;
  }
  .content p{
    font-size: 3.4em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
  }
  .content.flip{
    transform:rotateX(180deg);
  }
</style>
<div class="header">
  <span onclick="scrollDown();">
    <i class="fa fa-play"></i>
  </span>
  <span onclick="flip();">
    <i class="fa-solid fa-rotate-right"></i>
  </span>
</div>
<div class="content">
  <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
  var playing = false;
  var scrollInterval;
  function scrollDown() {
    if(playing){
      playing = false;
      clearInterval(scrollInterval);
      $(".fa-pause").addClass("fa-play").removeClass("fa-pause");
    }else{
      $(".fa-play").addClass("fa-pause").removeClass("fa-play");
      playing = true;
      let scrollStep = 1;
      scrollInterval = setInterval(() => {
        window.scrollBy(0, scrollStep);
        if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
            clearInterval(scrollInterval);
        }
      }, 10);
    }
  }
  function flip(){
    $(".content").toggleClass('flip');
  }
</script>
</div>

Components of a Teleprompter

1. Display Screen:
   • The text or script is displayed on a screen, often a tablet, monitor, or a specialized teleprompter display.
   • This screen is positioned below the camera lens and reflects the text onto a piece of glass or mirror.
2. Beam-Splitter Glass:
   • A piece of glass or a transparent mirror placed at a 45-degree angle in front of the camera lens.
   • The glass reflects the text from the display screen towards the presenter while allowing the camera to shoot through it without capturing the text.
3. Teleprompter Software:
   • Specialized software that formats and scrolls the text at a controllable speed.
   • The speed can often be adjusted to match the presenter’s pace, and some software offers remote control capabilities.
4. Mounting Equipment:
   • The teleprompter setup is mounted on a tripod or directly on the camera rig.
   • The mounting system ensures stability and alignment of the display and glass.

Types of Teleprompters

1. Stand-Alone Teleprompters:
   • Independent units that include their own display and mounting systems.
   • Used in professional studios and large-scale productions.
2. Camera-Mounted Teleprompters:
   • Designed to attach directly to the camera.
   • Suitable for both studio and field use, offering portability and convenience.
3. Tablet or Smartphone Teleprompters:
   • Utilize tablets or smartphones as the display screen.
   • Cost-effective and portable, ideal for smaller productions or individual content creators.
4. Presidential Teleprompters:
   • Consist of two glass panels on either side of a lectern.
   • Commonly used in political speeches, allowing the speaker to address multiple audiences.

Advantages of Using a Teleprompter

1. Maintained Eye Contact:
   • Presenters can look directly into the camera while reading the script, creating a more engaging and natural delivery.
2. Improved Confidence and Delivery:
   • Reduces the need to memorize scripts, allowing presenters to focus on their delivery and body language.
3. Consistency and Accuracy:
   • Ensures that the script is followed accurately, which is crucial for news broadcasts, political speeches, and corporate presentations.
4. Time Efficiency:
   • Speeds up the production process by reducing the number of takes needed due to forgotten lines or mistakes.

Considerations When Using a Teleprompter

1. Practice:
   • Presenters should practice reading from the teleprompter to ensure smooth delivery and proper pacing.
2. Speed Control:
   • The scrolling speed of the text should be adjusted to match the natural speaking pace of the presenter.
3. Script Formatting:
   • Text should be formatted with clear, large fonts and appropriate spacing to ensure readability.
4. Technical Setup:
   • Proper alignment and setup of the teleprompter are crucial to avoid capturing the text on camera and ensuring the presenter can read comfortably.

Teleprompters are invaluable tools in the realm of broadcasting, public speaking, and video production. By allowing presenters to read scripts while maintaining eye contact with the audience, teleprompters enhance the professionalism and effectiveness of presentations. Whether in a high-end television studio or a small home setup, teleprompters contribute to smoother, more confident deliveries and are an essential part of modern media production.