What is the process of uploading a video and showcasing it on an HTML page?

Question

What is the process of uploading a video and showcasing it on an HTML page?

I have successfully uploaded images and displayed them on an HTML page. Now, I am looking to do the same for videos.

Here is my current code:

$('#addPhotosBtn').click(function() {
  $(this).parents().find('#addPhotosInput').click();
});

document.getElementById('addPhotosInput').onchange = e => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  const li = ` <li> <img src="${url}">
       <span><i class="fa fa-trash"></i></span>
   </li>`
  $('.photos-list ul').append(li);
};

If you have any insight or suggestions on how to modify this code for video uploads, I'd greatly appreciate it!

Thank you in advance for your help!

javascript html jquery css

Answer 1

Answer №1

By including the accept attributes on the <input type='file'>, we are setting specific filters for the types of files that users can select from the dialog box:

For Images:
```
accept="image/png, image/gif, image/jpeg"
```
, and for Videos: accept=" video/*"
In addition to this, I have added a <video> element in the JavaScript code, which is a standard method for embedding videos in web pages.

The code looks like this:
```
<video controls="controls" src=" ${url} " type="video/mp4" width="400px" height="200px"></video>
```

$('#addPhotosBtn').click(function() {
  $(this).parents().find('#addPhotosInput').click();
});

document.getElementById('addPhotosInput').onchange = e => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  const li = ` <li> <img src=" ${url} ">
   <span><i class="fa fa-trash"></i></span>
   </li>`
  $('.photos-list ul').append(li);
};

$('#addVideosBtn').click(function() {
  $(this).parents().find('#addVideosInput').click();
});

document.getElementById('addVideosInput').onchange = e => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  const li = ` <li> <video controls="controls" src=" ${url} " type="video/mp4" width="400px" height="200px"></video>
       <span><i class="fa fa-trash"></i></span>
   </li>`
  $('.video-list ul').append(li);
};

.photos-list ul,
.videos-list ul {
  margin: 0px;
  padding: 0px;
}

.photos-list ul li,
.videos-list ul li {
  list-style: none;
  float: left;
  width: 19%;
  margin: 5px;
  position: relative;
}

.photos-list ul li img,
.videos-list ul li img {
  width: 100%;
  border-radius: 10px;
  height: 110px;
}

.photos-list ul li span,
.videos-list ul li span {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  padding: 5px 10px;
  cursor: pointer;
}

.photos-list ul li span svg,
.videos-list ul li span svg {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">

  <!-- Photos -->
  <div class="row">
    <div class="col-md-4">
      <input type="file" class="d-none" id="addPhotosInput" accept="image/png, image/gif, image/jpeg">
      <button class="btn btn-secondary" id="addPhotosBtn">Add Photos <i class="fa fa-camera"></i> </button>
    </div>
    <div class="col-md-12">
      <div class="photos-list">
        <ul>

        </ul>
      </div>
    </div>
  </div>

<!-- Video -->

  <div class="row">
    <div class="col-md-4">
      <input type="file" class="d-none" id="addVideosInput" accept=" video/*">
      <button class="btn btn-secondary" id="addVideosBtn">Add Videos <i class="fa fa-camera"></i> </button>
    </div>
    <div class="col-md-12">
      <div class="video-list">
        <ul>

        </ul>
      </div>
    </div>
  </div>

</div>

References: html5-video, <input> accept

Answer 2

By including the accept attributes on the <input type='file'>, we are setting specific filters for the types of files that users can select from the dialog box:

For Images:
```
accept="image/png, image/gif, image/jpeg"
```
, and for Videos: accept=" video/*"
In addition to this, I have added a <video> element in the JavaScript code, which is a standard method for embedding videos in web pages.

The code looks like this:
```
<video controls="controls" src=" ${url} " type="video/mp4" width="400px" height="200px"></video>
```

$('#addPhotosBtn').click(function() {
  $(this).parents().find('#addPhotosInput').click();
});

document.getElementById('addPhotosInput').onchange = e => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  const li = ` <li> <img src=" ${url} ">
   <span><i class="fa fa-trash"></i></span>
   </li>`
  $('.photos-list ul').append(li);
};

$('#addVideosBtn').click(function() {
  $(this).parents().find('#addVideosInput').click();
});

document.getElementById('addVideosInput').onchange = e => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  const li = ` <li> <video controls="controls" src=" ${url} " type="video/mp4" width="400px" height="200px"></video>
       <span><i class="fa fa-trash"></i></span>
   </li>`
  $('.video-list ul').append(li);
};

.photos-list ul,
.videos-list ul {
  margin: 0px;
  padding: 0px;
}

.photos-list ul li,
.videos-list ul li {
  list-style: none;
  float: left;
  width: 19%;
  margin: 5px;
  position: relative;
}

.photos-list ul li img,
.videos-list ul li img {
  width: 100%;
  border-radius: 10px;
  height: 110px;
}

.photos-list ul li span,
.videos-list ul li span {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  padding: 5px 10px;
  cursor: pointer;
}

.photos-list ul li span svg,
.videos-list ul li span svg {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">

  <!-- Photos -->
  <div class="row">
    <div class="col-md-4">
      <input type="file" class="d-none" id="addPhotosInput" accept="image/png, image/gif, image/jpeg">
      <button class="btn btn-secondary" id="addPhotosBtn">Add Photos <i class="fa fa-camera"></i> </button>
    </div>
    <div class="col-md-12">
      <div class="photos-list">
        <ul>

        </ul>
      </div>
    </div>
  </div>

<!-- Video -->

  <div class="row">
    <div class="col-md-4">
      <input type="file" class="d-none" id="addVideosInput" accept=" video/*">
      <button class="btn btn-secondary" id="addVideosBtn">Add Videos <i class="fa fa-camera"></i> </button>
    </div>
    <div class="col-md-12">
      <div class="video-list">
        <ul>

        </ul>
      </div>
    </div>
  </div>

</div>

References: html5-video, <input> accept

What is the process of uploading a video and showcasing it on an HTML page?

Answer №1

Similar questions

My selection of jQuery multiselect is experiencing issues with enabling disabled options

Ensuring form accuracy upon submission in AngularJS 1.5: Understanding the $invalid state in relation to $pristine field

Is there a way to turn off the pinch-to-zoom trackpad gesture or disable the Ctrl+wheel zoom function on a webpage

Responsive HTML grid with a distinct line separating each row

The content at the center of the page is shifting to the right side when the browser is resized

Does using .detach() eliminate any events?

Every time the page is refreshed, ExpressJS and NodeJS are working together to duplicate the array

Leveraging AJAX within a RESTful API in a Node.js environment to retrieve a JSON file and dynamically parse its contents according to the specific button selected on the front-end interface

Bringing the Jquery cursor into focus following the addition of an emoji

Experiencing difficulties with JWT implementation and seeking to transmit the JWT token to additional APIs

The Firestore query for viewing resources is currently not functioning as expected due to issues with

Using Vue3 to conditionally display a child div based on the class of its parent div

unable to properly verify if the value is above 0

How to Use Express.js to Stream Assets (JS/CSS/images) from Amazon S3

Core-pages with polymer core have no set height limit

The styling applied through the MUI TextField sx props does not take effect

Tips on displaying the appropriate object value in a text field based on the selection from a dropdown menu

JavaScript: Reorder an array to alternate between largest and smallest elements, starting with the largest

When I attempt to return an object from a function and pass the reference to a prop, TypeScript throws an error. However, the error does not occur if the object is directly placed in

What is the best way to send a function along with personalized data?