Hướng dẫn cách nhúng video trên google drive vào blogspot với các yếu tố HTML5

Bạn thường tải video lên blogger, để nó đáp ứng điều kiện của mobile thì bạn phải sử dụng các yếu tố HTML5.

Vậy bạn làm thế nào để nhúng video từ Google Drive vào blogspot bằng cách sử dụng các yếu tố video HTML5 và có hỗ trợ mobile.

Như chúng ta đều đã biết Google Drive đã cung cấp mã nhúng với khung nội tuyến, nhưng chúng ta phải nhấp 2 lần để phát video và có biểu tượng liên kết để xem trước video tới Google Drive ở trên cùng bên phải của trình phát để can thiệp vào màn hình của người dùng.
Với các yếu tố video HTML5, chúng ta có thể giúp người dùng tùy chỉnh cho video trên Google Drive dễ dàng hơn.

Nhưng để có thể sử dụng các yếu tố video HTML5 cho video trên Google Drive, chúng tôi phải sử dụng khóa API Google Drive cho các nguồn video.
Tạo khóa API Google Drive bằng các bước sau:

- Đăng nhập Bảng điều khiển API của Google
- Sau đó, hãy nhấp vào nút Tạo dự án
- Sau khi dự án mới được tạo thành công, vui lòng chọn API Google Drive, sau đó nhấp vào nút Bật .
- Sau đó, hãy nhấp vào nút Tạo thông tin xác thực .
- Để optian nào API bạn đang sử dụng? Vui lòng chọn dự án mà chúng tôi đã tạo trước đó. Đối với tùy chọn Bạn sẽ gọi API từ đâu? Vui lòng chọn một máy chủ Web (ví dụ: node.js, Tomcat) . Sau đó, kiểm tra Dữ liệu người dùng và nhấp vào nút Tôi cần thông tin xác thực?
- Sau đó nhấp vào nút Tạo ID ứng dụng khách OAuth .
- Thêm tên vào Tên sản phẩm và nhấp vào Tiếp tục và sau đó bấm Done .
- Sau đó, hãy nhấp vào nút Tạo thông tin xác thực màu xanh lam trên tab Thông tin xác thực rồi chọn khóa API . Vui lòng sao chép mã khóa API được cung cấp và ghi chú trong notepad.

Cho đến đây, chúng ta đã tạo thành công khóa API Google Drive , sau đó làm theo các bước tiếp theo để nhúng video Google Drive vào bài đăng.

Và đây là cách nhúng video được tải lên trên Google Drive để đáp ứng bằng cách sử dụng các phần tử video HTML5.

1. Đối với các blog không phải là AMP

- Thêm CSS vào trong mẫu của blogspot.

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

- Và sử dụng mã sau để hiển thị video từ Google Drive trong bài đăng.

<div class="video-responsive">
<video controls>
 <source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
</video>
</div>

Thay đổi văn bản FileID bằng mã từ URL chia sẻ tệp Google Drive như ví dụ sau mà tôi đã đánh dấu và đảm bảo tệp đó là Công khai trên web .

https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing

Sau đó, văn bản GoogleDriveAPIkey thay thế bằng khóa API Google Drive đã được tạo.

2. Đối với blog HTML AMP

- Cài đặt các amp-video js vào chỉnh sửa HTML của blog của bạn, nếu nó đã có thì bạn không cần phải cài đặt lại nó.

<script async="" custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

- Sau đó sử dụng mã sau để hiển thị video trong bài đăng.

<amp-video width="480" height="270" layout="responsive" controls>
   <source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
  </amp-video>

Thay đổi văn bản FileID bằng mã từ URL chia sẻ tệp Google Drive như ví dụ sau mà tôi đã đánh dấu và đảm bảo tệp đó là Công khai trên web .

https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing

Sau đó, văn bản GoogleDriveAPIkey thay thế bằng khóa API Google Drive đã được tạo.