Monday, 21.10.2019
29 C
Ho Chi Minh City
  • Hướng dẫn

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

Nổi bật

Trải nghiệm “The Jungle Book” bằng video VR 360

Mowgli: Cậu bé rừng xanh là một bộ phim giả tưởng của đạo diễn Andy Serkis chỉ...

Sniper Elite VR – Siêu phẩm game bắn súng thực tế ảo hot nhất năm 2019

Nhắc đến Sniper Elite là nhắc đến một siêu phẩm hành động lén lút kết hợp...

Sony phát triển thế hệ PSVR mới, mở ra cánh cửa chơi game trong tương lai

Với sức mạnh và khả năng hỗ trợ tối đa của PS5, đó sẽ là một...

Logitech mua Saitek – hãng chuyên làm controller chơi game giả lập, chuẩn bị đánh thị trường game VR

Nếu là fan của các tựa game giả lập lái máy bay thì hẳn bạn sẽ biết đến những...

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.

- Advertisement -

1 BÌNH LUẬN

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisement -

Tin mới

Sniper Elite VR – Siêu phẩm game bắn súng thực tế ảo hot nhất năm 2019

Nhắc đến Sniper Elite là nhắc đến một siêu phẩm hành động lén lút kết hợp...

Samsung Gear VR vượt mốc một triệu người sử dụng

Theo số liệu được công bố bởi Oculus VR, công ty hàng đầu trong phát triển công nghệ thực tế ảo thuộc Facebook và...

iPhone 8 sẽ dùng cảm biến laser phía sau, không chỉ lấy nét mà còn nhận diện độ sâu cho AR

Thông tin mới nhất cho chúng ta thấy iPhone 8 sẽ trang bị cảm biến laser phía sau, nhưng nó không chỉ dùng để lấy nét như những...

Bạn mong đợi gì tại sự kiện Google I/O 2016

Hội nghị lập trình viên Google I/O 2016 sẽ diễn ra từ ngày 18 đến 20 tháng 5 được trông đợi sẽ là sự...

Facebook mở chức năng 360 photos cho toàn bộ người dùng

Hôm nay Mark Zuckerberg đã chính thức mở chức năng 360 photos cho tất cả các tài khoản Facebook trên toàn thế giới.Chức năng...

Sphericam 2 – Camera quay video 360 ấn tượng

Sphericam 2 có kích thước nhỏ gọn hơn nhiều, cùng với cấu hình camera cực khủng. Sphericam 2 có hình cầu, cho phép ghi lại tất cả...
- Advertisement -

Bài viết tương tự