Creating dynamic visual elements on a webpage using HTML: Video

Question

Creating dynamic visual elements on a webpage using HTML: Video

As I continue to learn HTML, CSS, and JavaScript to create a basic website for educational purposes, I have successfully embedded a video stored in my drive using the video element on an HTML page. However, I now aim to also display the video's title, total duration, and view count alongside the video itself. Can someone guide me on where to focus more of my efforts and provide resources for learning how to achieve this integration?

Here is my current HTML code snippet:

* {
 padding:0px;
 margin:0px;
}

/* Rest of the CSS styles go here */

<!DOCTYPE HTML>
<html lang = "en">
  <head>
    <title>Videos</title>
      <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="videos.css">
  </head>

  <body>
    <header>
      <nav>
        <h1> Main logo </h1>
          <ul id="nav">
            <li><a class="homeblack" href="index.html">Home</a></li>
            <li><a class="homered" href="videos.html">Videos</a></li>
          </ul>
      </nav>
    </header>
    <div class="divider"></div>
    <div id="navBar">
      <ul>
        <li><a href="#">Education Videos</a></li>
        <li><a href="#">Film Videos</a></li>
        <li><a href="#">Other Videos</a></li>
      </ul>
    </div>
    
    <video title="Video Title" controls width="250" height="160"> 
      <source src="videoplayback.mp4" />
    </video> 

    <video title="Another Video Title" controls width="250" height="160"> 
      <source src="videoplayback (1).mp4" />
    </video> 
    
    <video title="One More Video Title" controls width="250" height="160"> 
      <source src="1 Ton.mp4" /> 
    </video> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  
  </body>
</html>

javascript html css

Answer 1

Answer №1

Tracking views on the client-side using HTML, CSS, and Javascript is not feasible because once a user navigates away from the page, that data is lost. To accurately track views, you will need to implement a backend system such as a database or logging file.

Additionally, native HTML5 video tags do not include metadata like the length of the video. However, this information can be added to the markup in other ways.

You may find more information on displaying views on HTML5 videos by visiting this link: How to display views on html5 video?

Answer 2

Tracking views on the client-side using HTML, CSS, and Javascript is not feasible because once a user navigates away from the page, that data is lost. To accurately track views, you will need to implement a backend system such as a database or logging file.

Additionally, native HTML5 video tags do not include metadata like the length of the video. However, this information can be added to the markup in other ways.

You may find more information on displaying views on HTML5 videos by visiting this link: How to display views on html5 video?

Answer 3

Answer №2

Desired Information:

...to showcase the video's title, total duration, and overall views...

display the video's title
length of the video
total number of views

1:

If you're referring to the video's file name as the "title of video," here's a solution:

Array.from(document.querySelectorAll("video")).forEach(video=>{
    const title = (video.src || video.children[0].src).replace(/.*\//g, "").replace(/\.[a-zA-Z0-9_-]+/, "").replace(/-|_/g, " ");
    video.insertAdjacentHTML("beforeBegin", title);
});

2:

Array.from(document.querySelectorAll("video")).forEach(video=>video.addEventListener('loadedmetadata', function() {
    const duration = videoPlayer.duration;
    video.insertAdjacentHTML("afterEnd", Math.floor(video.duration / (60 * 60)) + ":" + Math.floor(video.duration / 60) + ":" + video.duration % 60)
}));

3:

Refer to this answer.

DEMO:

Array.from(document.querySelectorAll("video")).forEach(video=>{
    const title = (video.src || video.children[0].src).replace(/.*\//g, "").replace(/\.[a-zA-Z0-9_-]+/, "").replace(/-|_/g, " ");
    video.insertAdjacentHTML("beforeBegin", title);
});
Array.from(document.querySelectorAll("video")).forEach(video=>video.addEventListener('loadedmetadata', function() {
    const duration = videoPlayer.duration;
    video.insertAdjacentHTML("afterEnd", Math.floor(video.duration / (60 * 60)) + ":" + Math.floor(video.duration / 60) + ":" + video.duration % 60)
}));

* {
 padding:0px;
 margin:0px;
}


body{
  margin: 0;
 }

header {
  background: green;
  color: white;
  padding: 8px 0px 6px 40px;
  height: 50px;
}

header h1 {
 display: inline;
 font-family: 'Oswald',sans-serif;
 font-weight: 400;
 font-size: 32px;
 float: left;
 margin-top: 0px;
 margin-right: 10px;
}

nav ul{
  display: inline;
 padding: 0px;
float: left;
}

nav ul li{
 display: inline-block;
 list-style-type:none;
 color: white;
 float: left;
 margin-left: 15px;
}

nav ul li a{
 color: white;
 text-decoration: none;
}

#nav {
 font-family: 'Montserrat', sans-serif;
}

.homered{
 background-color: red;
 padding: 30px 10px 25px 10px;

}

.divider{
 background-color: red;
 height: 5px;

}

.homeblack:hover{
 background-color: blue;
 padding: 30px 10px 25px 10px;
}
div{
 width:250px;
 height:666px;
 background:#1A8DA9;
}
div a{
 text-decoration:none;
 color:white;
 padding:20px;
 padding-right:100px
}
div ul li{
 list-style-type:none;
 display:block;
 padding :15px;

 border-bottom:1px solid #236D7F;
 }
 div ul li :hover{
  background:#4097AD;
  transition:linear all 0.40s;
  margin-left:10px;
 }
 div ul li a:hover{
  color:black;
 }



 #navBar {
   float: left;
 }

<!DOCTYPE HTML>
<html lang = "en">
  <head>
  <title>Videos</title>
      <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="videos.css">
  </head>


<body>
   <header>
  <nav>
  <h1> Main logo </h1>
   <ul id="nav"> 
    <li><a class="homeblack" href="index.html">Home</a></li>
    <li><a class="homered" href="videos.html">Videos</a></li>

 </ul>
 </nav>
 </header>
 <div class="divider"></div>
 <div id="navBar">

<ul>
 <li><a href="#">education videos </a></li>
 <li><a href="#">film videos</a></li>
 <li><a href="#">other videos </a></li>
</ul>

 </div>
<video title="abcd" controls width="250" height="160"> 
<source  src="videoplayback.mp4" />
</video> 
<video title="abcd" controls width="250" height="160"> 
<source src="videoplayback (1).mp4" />
</video> 

<video title="abcd" controls width="250" height="160"> 
<source src="1 Ton.mp4" /> 
</video> 

    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


  </body>
</html>

Answer 4

Desired Information:

...to showcase the video's title, total duration, and overall views...

display the video's title
length of the video
total number of views

1:

If you're referring to the video's file name as the "title of video," here's a solution:

Array.from(document.querySelectorAll("video")).forEach(video=>{
    const title = (video.src || video.children[0].src).replace(/.*\//g, "").replace(/\.[a-zA-Z0-9_-]+/, "").replace(/-|_/g, " ");
    video.insertAdjacentHTML("beforeBegin", title);
});

2:

Array.from(document.querySelectorAll("video")).forEach(video=>video.addEventListener('loadedmetadata', function() {
    const duration = videoPlayer.duration;
    video.insertAdjacentHTML("afterEnd", Math.floor(video.duration / (60 * 60)) + ":" + Math.floor(video.duration / 60) + ":" + video.duration % 60)
}));

3:

Refer to this answer.

DEMO:

Array.from(document.querySelectorAll("video")).forEach(video=>{
    const title = (video.src || video.children[0].src).replace(/.*\//g, "").replace(/\.[a-zA-Z0-9_-]+/, "").replace(/-|_/g, " ");
    video.insertAdjacentHTML("beforeBegin", title);
});
Array.from(document.querySelectorAll("video")).forEach(video=>video.addEventListener('loadedmetadata', function() {
    const duration = videoPlayer.duration;
    video.insertAdjacentHTML("afterEnd", Math.floor(video.duration / (60 * 60)) + ":" + Math.floor(video.duration / 60) + ":" + video.duration % 60)
}));

* {
 padding:0px;
 margin:0px;
}


body{
  margin: 0;
 }

header {
  background: green;
  color: white;
  padding: 8px 0px 6px 40px;
  height: 50px;
}

header h1 {
 display: inline;
 font-family: 'Oswald',sans-serif;
 font-weight: 400;
 font-size: 32px;
 float: left;
 margin-top: 0px;
 margin-right: 10px;
}

nav ul{
  display: inline;
 padding: 0px;
float: left;
}

nav ul li{
 display: inline-block;
 list-style-type:none;
 color: white;
 float: left;
 margin-left: 15px;
}

nav ul li a{
 color: white;
 text-decoration: none;
}

#nav {
 font-family: 'Montserrat', sans-serif;
}

.homered{
 background-color: red;
 padding: 30px 10px 25px 10px;

}

.divider{
 background-color: red;
 height: 5px;

}

.homeblack:hover{
 background-color: blue;
 padding: 30px 10px 25px 10px;
}
div{
 width:250px;
 height:666px;
 background:#1A8DA9;
}
div a{
 text-decoration:none;
 color:white;
 padding:20px;
 padding-right:100px
}
div ul li{
 list-style-type:none;
 display:block;
 padding :15px;

 border-bottom:1px solid #236D7F;
 }
 div ul li :hover{
  background:#4097AD;
  transition:linear all 0.40s;
  margin-left:10px;
 }
 div ul li a:hover{
  color:black;
 }



 #navBar {
   float: left;
 }

<!DOCTYPE HTML>
<html lang = "en">
  <head>
  <title>Videos</title>
      <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="videos.css">
  </head>


<body>
   <header>
  <nav>
  <h1> Main logo </h1>
   <ul id="nav"> 
    <li><a class="homeblack" href="index.html">Home</a></li>
    <li><a class="homered" href="videos.html">Videos</a></li>

 </ul>
 </nav>
 </header>
 <div class="divider"></div>
 <div id="navBar">

<ul>
 <li><a href="#">education videos </a></li>
 <li><a href="#">film videos</a></li>
 <li><a href="#">other videos </a></li>
</ul>

 </div>
<video title="abcd" controls width="250" height="160"> 
<source  src="videoplayback.mp4" />
</video> 
<video title="abcd" controls width="250" height="160"> 
<source src="videoplayback (1).mp4" />
</video> 

<video title="abcd" controls width="250" height="160"> 
<source src="1 Ton.mp4" /> 
</video> 

    <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


  </body>
</html>

Creating dynamic visual elements on a webpage using HTML: Video

Answer №1

Answer №2

Desired Information:

1:

2:

3:

DEMO:

Similar questions

Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Guide on how to prevent Paste (Ctrl+V) and Copy (Ctrl+C) functionalities in a TextField within MaterialUI

By utilizing the <tr> element, one can enhance the border thickness by 1 pixel

Next.js version 13 is causing the page to refresh each time the router is pushed

What could be causing the flex item to be wider than its container?

What is the standard error function used for jQuery promises?

Performing String formatting in JavaScript using an array

Adding a characteristic to every item in an array of objects

Can you provide instructions on utilizing the async .update() function for DataTables within MDBootstrap?

Utilizing JSON API filtering within a Next.js application

Challenges regarding placement and z-index are causing issues

What is the reason for triggering a rerender when there is a modification to a map() element using document.querySelector() in JS/next.js?

Is it feasible to run a function immediately following a reload?

Is it possible for search engines to crawl and index specific pages within a web application that is powered by

Design a custom Bootstrap dropdown using an input[type="text"] element

Create a dynamic form using JSON data and the Material UI library

What could be causing my video not to display a thumbnail on mobile devices until it is played?

Leverage React.js by incorporating a Header-Imported JavaScript Library

Merge two distinct arrays of objects based on a shared field

Adjust the width of a div within a nested iframe using jQuery without the need for an identifying ID on the iframe itself