Điều cần biết
- Với trang Hometrong chế độ xem Plan, chuyển đến Window> Thư viện >[MR] Thư mục Video Nền Toàn màn hình và kéo tiện ích vào trang.
- Để thêm video, đi tới File> Add Files For Upload> videos folder > Open.
Adobe Muse cho phép bạn tạo các trang web bằng quy trình làm việc tương tự như các ấn phẩm; bạn không cần phải hiểu sâu về mã tạo một trang hoặc một trang, mặc dù việc quen thuộc với HTML5, CSS và JavaScript sẽ không ảnh hưởng gì. Mặc dù video web truyền thống thường được thêm thông qua API video HTML5, Adobe Muse hoàn thành điều tương tự thông qua các tiện ích con 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.
Cách Chuẩn bị Trang cho Video Nền trong Adobe Muse CC
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ắt đầu, hãy tạo một thư mục cho trang Muse của bạn. Bên trong thư mục đó, hãy tạo một thư mục khác - chúng tôi sử dụng “media” - và di chuyển các phiên bản mp4 và webm của video vào thư mục đó.
- Khi bạn khởi chạy Muse, hãy chọn File> New Site.
- Khi hộp thoại Bố cục mở ra, hãy chọn Màn hìnhlàm Bố cục ban đầuvà thay đổi Chiều rộng Trang vàChiều cao trang giá trị thành1200 và900 . Nhấp vàoOK.
-
Nhấp đúp vào Trang Chínhtrong dạng xem 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 đầu và cuối trang. Bạn thực sự không cần Đầu trang và Chân trang cho ví dụ này.
Cách Sử dụng Tiện ích Video Nền Toàn màn hình trong Adobe Muse CC
Sử dụng tiện ích này thậ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ế độ kế hoạch.
- Khi Chế độ xem Kế hoạch mở ra, hãy nhấp đúp vào Trang chủđể mở.
- Mở bảng Thư viện - nếu bảng không mở ở bên phải của Giao diện, hãy chọn Cửa sổ> Thư viện- và xoay xuống thư mục [MR] Video Nền Toàn Màn Hình.
- Kéo tiện ích thư mục vào trang.
-
Bạn sẽ thấy Tùy chọnyêu cầu bạn nhập tên của phiên bản mp4 và webm của video. Nhập tên chính xác như cách viết trong thư mục 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 vào vùng MP4và WEBMcủa menu Tùy chọn
Một mẹo khác: Tất cả những gì tiện ích này làm là viết mã HTML 5 cho bạn. Bạn có thể biết điều này bởi vì bạn nhìn thấy trong tiện ích. Trong trường hợp này, bạn có thể đặt tiện ích từ trang web lên bảng dán và nó sẽ vẫn hoạt động. Bằng cách này, nó không ảnh hưởng đến bất kỳ nội dung nào bạn sẽ đặt trên trang.
Cách Thêm Video và Kiểm tra Trang Trong Adobe Muse CC
Mặc dù bạn đã thêm mã sẽ phát video nhưng Muse vẫn không biết vị trí của những video đó.
- Để sửa lỗi này, hãy chọn File> Add Files For Upload.
- Khi hộp thoại Tải lênmở ra, hãy điều hướng đến thư mục chứa video của bạn, 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 Assets,và bạn sẽ thấy hai video của mình. Chỉ cần để chúng trong bảng điều khiển. Chúng không cần phải được đặt trên trang.
-
Để kiểm tra dự án, hãy chọn Tệp> Trang Xem trước Trong Trình duyệthoặc vì đây là một trang duy nhất, Tệp> Xem trước Trang web Trong Trình duyệt. Trình duyệt mặc định của bạn sẽ mở và video sẽ phát.
- Tại thời điểm này, bạn có thể coi 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 tệp đó.
Cách Thêm Khung Áp phích Video trong Adobe Muse CC
Đây là trang web mà chúng ta đang đề cập ở đây và tùy thuộc vào tốc độ kết nối, rất có thể người dùng của bạn có thể mở trang và nhìn chằm chằm vào màn hình trống trong khi tải video. Đây không phải là một điều tốt. Dưới đây là cách đối phó với chút tồi tệ này.
Bao gồm khung áp phích của video là “Phương pháp hay nhất”, khung này sẽ xuất hiện trong khi tải video. Đâ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 ảnhvà điều hướng đến hình ảnh sẽ được sử dụng.
-
Trong khu vực Phù hợp, chọn Scale to Fillvà nhấp vào Điểm trung tâmtrong khu vực Vị trí. Điều này sẽ đảm bảo hình ảnh sẽ luôn mở rộng từ tâm 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 lấp đầy trang.
- Một mẹo nhỏ khác là tô màu thật chắc trong trường hợp khung áp phích phải mất một lúc mới xuất hiện. Để thực hiện việc này, hãy nhấp vào chip Color để mở Bộ chọn màu Muse. Chọn công cụ eyesroppervà nhấp vào màu chủ đạo trong ảnh. Khi hoàn tất, hãy nhấp vào trang để đóng hộp thoại Điền vào Trình duyệt.
-
Tại thời điểm này, bạn có thể lưu dự án hoặc xuất bản.
Phần cuối cùng của loạt bài này hướng dẫn bạn cách viết mã HTML5 để trình chiếu video vào nền của trang web.