Trang chủ Hướng dẫn Cách chèn ảnh / video 360° trên website cá nhân

Cách chèn ảnh / video 360° trên website cá nhân

1
518

Google là một trong hãng công nghệ đi đầu trong việc phát triển nội dung 360°và thiết bị VR. Bằng chứng thiết thực nhất là Youtube và Google Cardboard. Tuy nhiên, thì Google còn phát triển một API để lập trình viên có thể ứng dụng hình ảnh video 360° lên website cá nhân của mình.

Trong bài viết này thì mình sẽ hướng dẫn các bạn cách đưa ảnh / video 360° lên trực tiếp trên website và blog của mình thông qua embeded của Google.

1. Trình duyệt hỗ trợ

Các trình duyệt web trên PC hiện tại như Chrome, Safari, Firefox, và Internet Explorer 11. Trình duyệt trên các thiết bị di động iOS 8+, Android 4.4+

Các bạn có thể dùng chuột di chuyển hình ảnh bên dưới này để trải nghiệm hình 360°

2. Cách chụp hình và quay video 360°

– Đối với hình ảnh 360° thì bạn có thể dùng điện thoại để chụp và tham khảo các ứng dụng này để có thể chụp cho mình được bức ảnh vi diệu nhất.
– Về video thì tương đối khó, bạn cần phải có thiết bị quay chuyên dụng như Ricoh Theta S hoặc Luna – Camera 360°.

3. Cách để chèn vào Website / Blog

Đối với các bạn đã có kiến thức căn bản về html thì việc này hoàn toàn đơn giản. Công việc của bạn chỉ là copy và paste đoạn code bên dưới này vào trình soạn thảo html trên website của bạn và thay thế một số thông tin cần thiết.

See the Pen VR View on Website by Võ Minh Mẫn (@v-minh-mn-the-looper) on CodePen.

Giải thích đoạn code trên:

– width, height: chiều dài và cao của khung hình ảnh hiển thị trên website (ví dụ: width=”100%” height=”500″)
– ?image= hoặc ?video= đây là biến thông báo cho api biết nội dung là hình ảnh hay là video
– linkto360content: đây là link hình ảnh, video 360° của mình (ví dụ: https://ivr.vn/hinhanh.jpg).
– allowfullscreen: cho phép người dùng trải nghiệm ở chế độ toàn màng hình
– frameborder: hiển thị viền của khung hình, 0: không có viền, 1: có viền.

Nếu trong quá trình làm mà bạn gặp khó khăn thì có thể để lại comment bên dưới đây, đội ngũ dev của ivr.vn sẽ hỗ trợ bạn cách thực hiện.