Cách Làm Việc Với Video HTML - TheFastCode

Di chuyển qua YouTube ... với & LT; Video & GT; yếu tố và một chút JavaScript. , Bạn có thể bắt đầu tạo trang web video của riêng bạn. Phần tử video khá đơn giản để sử dụng, nhưng sức mạnh thực sự đến khi bạn kết hợp nó với JavaScript, điều này cung cấp cho bạn mức độ kiểm soát cao đối với hành vi của người chơi.

Trong hướng dẫn này, chúng tôi bao gồm các thiết lập cơ bản của video, chọn các tệp để phát lại và tạo hình thu nhỏ.

01. Tạo một trang cơ bản

Hãy bắt đầu với một phác thảo trang HTML. Chúng tôi sẽ cần một cấu trúc div đơn giản, một số CSS để tạo kiểu và, phê bình nhất, một tập tin kịch bản. Bạn sẽ nhận thấy rằng thẻ video trống ngay bây giờ, vì vậy sẽ không làm gì khi bạn tải trang. Tuy nhiên, chúng tôi cung cấp cho nó một Tôi Vì vậy, chúng ta có thể kiểm soát nó với JavaScript.

& lt;! DocType HTML & GT; & lt; html & gt; & lt; Head & GT; & lt; meta charset = 'utf-8' / & gt; & lt; Tiêu đề & GT; Trình phát video HTML của tôi & LT; / Tiêu đề & GT; & lt; link rel = 'stylesheet' href = 'custom.css' / & gt; & lt; script src = "player.js" & gt; & lt; / script & gt; & lt; / head & gt; & lt; body & gt; & lt; div id = "Tiêu đề" & gt; & lt; h1 & gt; Chào mừng bạn đến với thư viện video của tôi! & lt; / h1 & gt; Cuộn qua các video bên dưới và nhấp vào nút bạn muốn chơi. & lt; / div & gt; & lt; div id = "hình thu nhỏ-container" & gt; & lt; / div & gt; & lt; div id = "người chơi-container" & gt; & lt; video id = "người chơi" & gt; & lt; / video & gt; & lt; div id = "điều khiển" & gt; & lt; / div & gt; & lt; / div & gt; & lt; / body & gt; & lt; / html & gt;

02. Kiểu trang

Tiếp theo, chúng ta sẽ bắt đầu thêm kiểu dáng vào trang. Trước khi chúng tôi cố gắng làm bất cứ điều gì quá thông minh, hãy bắt đầu bằng cách thêm kiểu dáng cơ bản cho một vài yếu tố div của chúng tôi để mọi thứ trông đáng kính hơn một chút.

Cơ thể { Màu nền: #cccccc; Font-Family: Sans-serif; Không thể # người chơi-container { lề-trái: tự động; lề-phải: tự động; Chiều rộng: 640px; Chiều cao: 480px; Màu nền: # 538C99; Border-Radius: 20px; Không thể #tiêu đề { lề-trái: tự động; lề-phải: tự động; Chiều rộng: 640px; Text-Căn chỉnh: Trung tâm; PADDING-TOP: 30px; Đệm-bottom: 50px; Màu nền: # 538C99; Màu sắc: # 333333; Border-Radius: 20px; }

03. Thêm kiểu dáng

Mọi thứ trở nên thú vị hơn một chút khi chúng ta đến để phong cách DivNail-Container Div. Chúng ta sẽ điền vào cái này với img. các yếu tố, đó sẽ là hình thu nhỏ được tạo từ video của chúng tôi. Do đó, chúng tôi muốn nó hiển thị một thanh cuộn ngang nếu chúng ta có nhiều hình thu nhỏ hơn nó có thể hiển thị cùng một lúc. Chúng ta có thể làm điều này bằng cách sử dụng Overflow-X. bất động sản.

# Thumbnail-Container { Màu nền: #cccccc; Margin-top: 30px; lề-trái: tự động; lề-phải: tự động; Chiều rộng: 640px; Chiều cao: 120px; Overflow-x: cuộn; Overflow-Y: Ẩn; Không gian trắng: Nowrap; Border-Radius: 20px; }

04. Kích thước trình phát video thích hợp

Có thêm một chút kiểu dáng chúng ta cần làm. Vì nó là, khi chúng ta bắt đầu phát video, họ sẽ hiển thị ở bất cứ độ phân giải bản địa nào của họ. Điều này sẽ không có vẻ tốt trên trang. Hãy tạo kiểu phần tử video để xác định mức độ lớn của nó. Nếu chúng ta đặt chiều rộng và chiều cao của nó lên 100%, nó sẽ chỉ lấp đầy div.

Video { Chiều rộng: 100%; Chiều cao: 100%; }

05. Thiết lập kịch bản

Đã đến lúc xuống JavaScript. Chúng ta hãy chuẩn bị một danh sách các tệp video trong một mảng để nó hoạt động với (chúng tôi sẽ mã mạng cứng ngay bây giờ, nhưng bạn có thể thử định cấu hình nó để truy xuất qua JSON từ dịch vụ HTTP).

Chúng tôi cũng sẽ xác định một vài biến mà chúng tôi sẽ sử dụng sau: ' người chơi 'Sẽ là yếu tố video; ' Playerource. 'Sẽ là một yếu tố nguồn mới được tạo sẽ trở thành một đứa trẻ của đối tượng người chơi sau này và trỏ đến các tệp nguồn. Chúng tôi cũng sẽ lên kế hoạch móc vào một DomcontentLoaded. sự kiện để đảm bảo kịch bản chờ trang tải trước khi đá vào hành động.

var Videofiles = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5.mp4"]; var player; var playerource = document.createase ("nguồn"); tài liệu.addeventlistener ("domcontentLoaded", hàm () {khởi tạo ();}, false);

Lưu ý rằng phát lại video trong trình duyệt dựa trên sự hiện diện của codec có thể đọc định dạng video bạn đang sử dụng. Để đảm bảo video của bạn hoạt động chéo trình duyệt, đặt cược an toàn nhất là các tệp MP4 bằng cách sử dụng codec H.264.

06. Tạo một hình thu nhỏ

Tiếp theo, hãy tạo một hàm sẽ tạo hình thu nhỏ hình ảnh từ tệp video. Chúng tôi muốn điều này để tham gia một đối tượng video và trả về một đối tượng hình ảnh. Nội bộ, cách chúng ta sẽ đạt được điều này là sử dụng HTML Canvas. .

Chức năng Generatethumbnail (video) { var canvas = document.createase ("canvas"); var container = document.getelementById ("hình thu nhỏ-container"); var width = container.clientwidth; var chiều cao = container.clientheight; canvas.width = (chiều rộng / 3); Canvas.Height = Chiều cao; Canvas.getContext ("2D"). DrawImage (video, 0, 0, canvas.width, canvas.height); var image = document.createase ("img"); image.src = canvas.todataurl (); Trả lại hình ảnh; }

07. Tự động tạo hình thu nhỏ khi video được tải

Bây giờ chúng ta có thể lấy chức năng Generatethumbnail và sử dụng nó trên mỗi tệp video trong danh sách của chúng tôi. Hãy làm điều này bằng cách thực hiện Chữ ký () chức năng. Hàm này sẽ thêm đối tượng Plantsource dưới dạng con của phần tử video, sau đó lặp qua mọi tệp trong danh sách, tải nó vào một đối tượng video tạm thời và sau khi được tải, tạo một hình thu nhỏ và thêm nó vào thùng chứa hình thu nhỏ.

Chức năng khởi tạo () { Người chơi = Tài liệu.getelementById ("Người chơi"); Người chơi.appendchild (PlayerOurce); player.controls = false; Videofiles.foreach (chức năng (tệp) { var limbsource = document.createase ("nguồn"); Thumbsource.src = file; var cimbvideo = document.createase ("video"); Thumbvideo.addeventlistener ("loadeddata", hàm () { var container = document.getelementbyId ("hình thu nhỏ-container") var image = generatethumbnail (thumbvideo); container.appendchild (hình ảnh); }, sai); ngón tay cái.appendchild (ngón tay cái); }); }

08. Thêm liên kết đến hình thu nhỏ

Có một cái gì đó mất tích, mặc dù. Hình thu nhỏ của chúng tôi hiển thị trong thùng chứa, nhưng không ai trong số họ có thể nhấp. Chúng ta cần bọc các hình ảnh trong một & lt; a & gt; yếu tố, cần thực hiện một số javascript khi nhấp vào. Hãy điều chỉnh chức năng được nối với loadeddata. sự kiện để tạo các liên kết là tốt, thay vì chỉ img. các yếu tố.

Thumbvideo.addeventlistener ("loadeddata", hàm () { var container = document.getelementbyId ("hình thu nhỏ-container") var image = generatethumbnail (thumbvideo); var link = document.createase ("A"); link.href = "javascript: play (\" "+ Thumbsource.src +" \ ")"; link.appendchild (hình ảnh); container.appendchild (liên kết); }, sai);

09. Phát video

Bây giờ chúng tôi đang tạo hình thu nhỏ với các liên kết có thể nhấp, được thiết lập để gọi Chơi (Thumbsource.src) , Ở đâu Thumbsource.src. trỏ đến tên tệp của tệp video có liên quan. Tất cả những gì còn lại là triển khai chức năng phát để đặt PlayerOurce (mà bạn sẽ gọi lại, chúng tôi đã liên kết với phần tử trình phát video) để trỏ đến tệp chính xác và khởi động lại phát lại.

Chơi chức năng (URL) Đồn là PlayerOurce.src = url; Người chơi.Controls = TRUE; người chơi.load (); người chơi.play (); }

Bài viết này ban đầu xuất hiện trong sự cố 266 của nhà thiết kế web, tạp chí thiết kế web sáng tạo - cung cấp các hướng dẫn chuyên gia, xu hướng tiên tiến và tài nguyên miễn phí. Mua số phát hành 266 tại đây hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

• Cách cấp nguồn cho các menu của bạn với hình ảnh động CSS
• 16 ví dụ html tuyệt vời
• 9 trong số các tài nguyên tốt nhất để học HTML và CSS