Phần 3 về cách tạo video nền

01/05

Thêm video vào Adobe Muse

Video nền dễ dàng thêm vào Muse nhờ tiện ích miễn phí.

Khía cạnh thực sự thú vị của Adobe Muse là nó cho phép bạn tạo các trang web bằng cách sử dụng một quy trình làm việc tương tự như được sử dụng để đưa ra các ấn phẩm. Bạn không cần hiểu sâu về mã xây dựng trang web hoặc trang nhưng sự quen thuộc với HTML5, CSS và JavaScript sẽ không bị ảnh hưởng.

Mặc dù video web truyền thống thường được thêm thông qua việc sử dụng API video HTML5, Adobe Muse hoàn thành điều tương tự thông qua những gì nó gọi là "tiện ích con". Widgets tạo HTML 5 cần thiết cho các tác vụ cụ thể nhưng sử dụng giao diện ngôn ngữ đơn giản trong Muse để viết mã khi trang được xuất bản.

Trong bài tập này, chúng ta sẽ sử dụng một widget mà bạn có thể tải xuống miễn phí, từ Muse Resources. Khi tải xuống tiện ích con, tất cả những gì bạn cần làm là mở tệp .zip và nhấp đúp vào tệp .mulib trong thư mục Video toàn màn hình. Điều này sẽ cài đặt nó vào bản sao của bạn của Adobe Muse.

02 trên 05

Cách chuẩn bị một trang cho video nền trong Adobe Muse CC

Chúng tôi bắt đầu bằng cách tạo một trang web mới và đặt thứ nguyên trang.

Với tiện ích được cài đặt, bây giờ bạn có thể tạo trang sẽ sử dụng video.

Trước khi bạn bắt đầu, hãy tạo một thư mục cho trang Muse của bạn. Bên trong thư mục đó tạo một thư mục khác - tôi sử dụng “ media ” - và chuyển các phiên bản mp4 và webm của bạn vào thư mục đó.

Khi bạn khởi chạy Muse, chọn File> New Site . Khi hộp thoại Layout mở ra, chọn Desktop như Layout ban đầu và thay đổi giá trị Page WidthPage Height thành 1200900 . Nhấp vào OK .

Nhấp đúp vào Trang Chính trong giao diện Kế hoạch để mở trang Chính. Khi Trang chính mở ra, hãy di chuyển các hướng dẫn Đầu trang và Chân trang lên trên cùng và dưới cùng của trang. Bạn thực sự không cần Header và Footer cho ví dụ này.

03 trên 05

Cách sử dụng Tiện ích video nền toàn màn hình trong Adobe Muse CC

Tất cả những gì bạn cần làm là thêm tên video và để tiện ích xử lý phần còn lại.

Sử dụng các widget đã chết đơn giản. Điều đầu tiên bạn cần làm là quay lại Chế độ xem kế hoạch bằng cách chọn Chế độ xem> Chế độ . Khi Chế độ xem kế hoạch mở ra, hãy nhấp đúp vào Trang chủ để mở nó.

Mở bảng điều khiển Thư viện - nếu nó không mở ở phía bên phải của Giao diện, hãy chọn Cửa sổ> Thư viện - và xoay vòng xuống thư mục Video nền toàn màn hình [MR] . Kéo tiện ích vào thư mục vào trang.

Bạn sẽ thấy các tùy chọn yêu cầu bạn nhập tên của các phiên bản mp4 và webm của video. Nhập tên chính xác như chúng được viết trong thư mục nơi bạn đặt chúng. Một mẹo nhỏ để đảm bảo bạn không mắc lỗi là sao chép tên của video mp4 và dán nó vào các khu vực MP4WEBM của menu Tùy chọn .

Một mẹo khác: Tất cả tiện ích này thực hiện là viết mã HTML 5 cho bạn. Bạn có thể nói điều này bởi vì bạn thấy <> trong tiện ích. Trong trường hợp này, bạn có thể đặt tiện ích con ra khỏi trang web trên trang bìa và nó sẽ vẫn hoạt động. Bằng cách này, nó không can thiệp vào bất kỳ nội dung nào bạn sẽ đặt trên trang.

04/05

Cách thêm video và kiểm tra một trang trong Adobe Muse CC

Có lượt phát video khi bạn kiểm tra trang web hoặc trang.

Mặc dù bạn đã thêm mã sẽ phát video, Muse vẫn không có đầu mối cho những video đó. Để khắc phục điều này, hãy chọn Tệp> Thêm tệp để tải lên . Khi hộp thoại Tải lên mở ra điều hướng đến thư mục chứa video của bạn, hãy chọn chúng và nhấp vào Mở . Để đảm bảo chúng đã được tải lên, hãy mở bảng điều khiển Nội dung và bạn sẽ thấy hai video của mình. Chỉ cần để chúng trong bảng điều khiển. Họ không cần phải được đặt trên trang.

Để kiểm tra dự án, chọn File> Preview Page In Browser hoặc, bởi vì đây là một trang duy nhất, File> Preview Site In Browser . Trình duyệt mặc định của bạn sẽ mở và video - trong trường hợp của tôi là một cơn mưa nhiệt đới - sẽ bắt đầu phát.

Tại thời điểm này, bạn có thể xử lý tệp Muse như một trang web thông thường và thêm nội dung vào Trang chủ và video sẽ phát bên dưới nó.

05/05

Làm thế nào để thêm một khung áp phích video trong Adobe Muse CC

Luôn thêm khung áp phích cho bất kỳ dự án video nào.

Đây là trang web chúng ta đang nói đến ở đây và, tùy thuộc vào tốc độ kết nối, có khả năng người dùng của bạn có thể mở trang và đang nhìn chằm chằm vào màn hình trống trong khi video tải. Đây không phải là một điều tốt. Đây là cách giải quyết vấn đề này.

Đó là "Phương pháp hay nhất" để bao gồm khung áp phích của video, video sẽ xuất hiện trong khi video tải. Đây thường là ảnh chụp màn hình kích thước đầy đủ của một khung hình từ video.

Để thêm khung áp phích, hãy nhấp một lần vào Trình duyệt Điền ở đầu trang. Nhấp vào liên kết Hình ảnh và điều hướng đến hình ảnh sẽ được sử dụng. Trong vùng Fitting , chọn Scale to Fill và nhấn vào điểm Center trong vùng Position . Điều này sẽ đảm bảo hình ảnh sẽ luôn luôn tỷ lệ từ trung tâm của hình ảnh khi kích thước khung nhìn của trình duyệt thay đổi. Bạn cũng sẽ thấy hình ảnh điền vào trang.

Một mẹo nhỏ khác là ít nhất một màu trắng không phải là màu trắng chỉ trong trường hợp khung áp phích mất một lúc mới xuất hiện. Để làm điều này, hãy nhấp vào chip Màu để mở Bộ chọn Màu Muse. Chọn công cụ Eyedropper và nhấp vào một màu chiếm ưu thế trong hình ảnh. Khi hoàn tất, nhấp vào trang để đóng hộp thoại Trình duyệt điền.

Tại thời điểm này, bạn có thể lưu dự án hoặc xuất bản nó.

Phần cuối cùng của loạt bài này cho bạn thấy cách viết mã HTML5 để chiếu video vào nền của trang web.