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

What's the best approach for revalidating data with mutate in SWR?

Struggling with updating state using splice method within an onClick event in React Hooks

Exploring creative methods for incorporating images in checkboxes with CSS or potentially JavaScript

Access the data from a JSON object within a v-select menu

jQuery Event not Triggering on Newly Added Element

The visibility of a CSS class is rendered non-apparent when formed through the implementation

Utilizing a setTimeout function within a nested function in JavaScript

Angular Logout does not reset local storage items

Prevent any unauthorized modifications to the ID within the URL by implementing appropriate security measures

Could Ramda assist in enhancing pipeline/composition processes with a logging feature?

MUI Step Indicator Icon is not visible

As soon as I insert an image, the text on the right automatically moves to the bottom

Using SVG graphics as data labels in a HighChart stacked column chart

Making a REST call with values containing an apostrophe

The PhoneGap Android whitelist feature seems to be malfunctioning and preventing navigation to the next page

GraphQL and Relay.js issue: Error Message: Field "id" is expected in "Node"

My jQuery Ajax seems to have a glitch, can someone help me figure out

Utilizing PHP and AJAX to Extract Information from a MySQL Database

The message "In Angular, there is no such property as 'data' in the type '{ user: User; session: Session; error: ApiError; }'."

Iterate through a local storage object using JavaScript's looping mechanism