Xin chào, trong bài giảng này chúng ta sẽ nói về đa phương tiện.
Điều này bao gồm video và âm thanh vào trang web của bạn.
Bây giờ video và âm thanh là hai trong số các yếu tố phổ biến
nhất và hai yếu tố ghét nhất của web.
Các nhà thiết kế thích nó bởi vì họ có thể đưa các video thú vị của họ và
có lẽ một số âm nhạc tự chế trực tuyến và chia sẻ với tất cả mọi người.
Những người truy cập trang web của bạn đôi khi ghét nó vì họ cảm thấy như họ không
kiểm soát được những gì họ đang nhìn thấy.
Vì vậy, những gì chúng ta sẽ nói về ngày hôm nay là các yếu tố âm thanh và video HTML5.
Chúng tôi sẽ giải thích ngắn gọn mục đích của plugin.
Và cuối cùng, chúng ta sẽ suy nghĩ về các vấn đề về khả năng truy cập
đi kèm với việc sử dụng các loại thẻ đa phương tiện này.
Vì vậy, trước khi HTML5, không có thực sự bất kỳ sử dụng đa phương tiện nhất quán
đã được tổ chức trên tất cả các trình duyệt.
Vì vậy, HTML5 mới được thiết kế để loại tránh việc sử dụng phải sử dụng plugin hoặc
phần mềm bổ sung mà bạn chưa có trên máy tính của bạn.
Nó thực sự nên được cắm và chơi.
Nếu bạn định đưa vào một video, mọi người chỉ có thể xem nó mà không cần
phải tải về Quicktime hoặc Flash, hoặc bất cứ thứ gì dọc theo dòng đó.
Bây giờ nó chưa phải là một thẻ được thực hiện đầy đủ.
Nhưng nó đang di chuyển rất nhanh theo hướng đó.
Vì vậy, hãy bắt đầu với các yếu tố video.
Vì vậy, thẻ video sử dụng một thuộc tính nguồn rất giống với
thuộc tính hình ảnh.
Bạn cho trình duyệt biết tệp ở đâu.
Bạn cũng có thể sử dụng những gì chúng tôi gọi là thẻ nhúng,
nơi bạn có thể có thẻ video và sau đó nhiều nguồn dưới đây.
Có một số thuộc tính được sử dụng rất rộng rãi.
Hai đầu tiên, chiều cao và chiều rộng, là khá tự giải thích.
Bạn muốn video của bạn xuất hiện trong trình duyệt lớn như thế nào?
Tự động phát lệnh cho biết video có nên bắt đầu hay không ngay sau khi bạn tải trang hay không.
Loop sẽ cho phép video phát lại và lặp đi lặp lại.
Và cái cuối cùng, điều khiển, là cái gì đó bạn có thể thêm vào để cho người đó
kiểm soát nhiều hơn khi nào nên dừng lại và bắt đầu video.
Nếu bạn sử dụng một thẻ video, nó thường là một ý tưởng thực sự tốt để đặt một số
văn bản trong đó cùng với các thuộc tính khác nhau.
Bằng cách đó, nếu trình duyệt vì lý do nào đó không hỗ trợ thẻ hoặc
không thể phát video, bạn sẽ nhận được một loại gợi ý hữu ích cho người dùng cho họ biết
nên có một video ở đây mà bạn sẽ xem.
Phần tử âm thanh rất giống với video, và
sau đó một lần nữa chúng tôi sử dụng một thuộc tính nguồn để liên kết đến tệp.
Thông thường, bạn sẽ sử dụng tệp.mp3 hoặc .wav.
Các thuộc tính một lần nữa, rất giống nhau.
Bạn có tự động phát, điều khiển và vòng lặp, nhưng chúng tôi cũng có bộ đệm, tắt tiếng và âm lượng.
Và đây là những thuộc tính bổ sung mà bạn có thể đặt vào nơi bạn sẽ kiểm soát
những gì người đó đang lắng nghe và to như thế nào.
Ngoài ra khi bạn đang sử dụng âm thanh, bạn có thể đặt clip nơi bạn có thể đi vào và
nói rằng, tôi muốn video bắt đầu vào thời điểm cụ thể này.
Ví dụ đầu tiên của tôi, tôi muốn nó chỉ phát nhạc từ 5 đến 25 giây.
Lần tiếp theo, bạn bắt đầu từ đầu và
bạn sẽ chỉ chơi 39 giây đầu tiên.
Một lần nữa, bạn có thể tiếp tục và tiếp tục.
Tôi muốn bắt đầu từ một phút 38 giây, và chỉ cần tiếp tục và chơi đến 45.
Hoặc cuối cùng bạn chỉ có thể nói, hey, bắt đầu từ 42 giây và chơi từ đó.
Vì vậy, cho bạn thấy mã cho video và
âm thanh HTML là khá nhiều phản đối của những gì nó là tất cả về.
Nó được cho là nhìn vào mọi thứ và nghe thấy mọi thứ.
Vì vậy, chúng ta hãy đi trước và nhìn vào một số mã bây giờ mà thực sự làm việc.
Bạn có thể thấy rằng tôi có src như chỉ là bộ phim BoxCar của tôi, và
tôi đã thiết lập chiều rộng mặc định để 40.
Vì vậy, tôi sẽ đi qua đây để Sublime và mở này lên trong trình duyệt.
Nó ở đó, và nó không phải là rất thú vị.
Trừ khi bạn có đôi mắt siêu nhanh và trình duyệt của bạn là cực kỳ nhanh, bạn hoàn toàn
bỏ lỡ thực tế là nó tải video này và chơi tất cả các cách thông qua.
Vì vậy, hãy tiếp tục và thử lại lần nữa.
Thực ra, nó chỉ nạp nó và không làm gì cả.
Hãy thêm tự động phát.
Được rồi, cứu nó đi.
Tôi sẽ đi qua đây và tải lại, và bây giờ bạn có thể thấy
bằng cách thêm thuộc tính autoplay, nó sẽ tự động hiển thị video.
Bây giờ đây là điều bạn không muốn làm trừ khi bạn rất chắc chắn
rằng người xem muốn xem nó.
Gần đây có một sự náo động lớn khi một trang mạng xã hội
bắt đầu làm cho tất cả các video tự động phát.
Vì vậy, nếu bạn tiếp tục, đột nhiên tất cả những video này đang phát.
Và nó đã ăn hết một lượng băng thông khổng lồ cho mọi người, được chứ?
Vì vậy, thay vì chỉ làm tự động phát, chúng ta hãy đi trước và đưa vào điều khiển.
Bằng cách này,
bạn có thể thấy chúng ta đã thêm một bảng điều khiển nhỏ vào cuối video.
Giờ đây mọi người có thể bắt đầu video, dừng video và tua lại video đó.
Đây thực sự là cách bạn muốn suy nghĩ về
cách bạn có thể nâng cao trải nghiệm cho người dùng.
Có thể đặt nhiều thuộc tính
vào điều này và loại đặt chúng trên đầu trang của nhau.
Nếu chúng ta làm điều này ngay bây giờ, bạn sẽ được trải nghiệm
5 tuổi của tôi bay xuống đường nhiều lần.
Một lần nữa, bạn sẽ thực sự muốn tránh sử dụng vòng lặp và cũng tránh sử dụng tự động phát,
trừ khi bạn đang cho mọi người cơ hội để sử dụng các điều khiển là tốt, được
chứ?
Một điều cuối cùng tôi muốn nói về ở đây là bạn có thể nhận thấy với điều khiển và
vòng lặp, đây là những thuộc tính mà không xuất hiện để được lấy bất kỳ giá trị.
Vì vậy, src =, width =.
Khi bạn đặt trong các thuộc tính boolean,
đó là điều tương tự như nói điều khiển bằng đúng.
Vòng lặp bằng đúng.
Vì vậy, đó là cách chúng tôi đã trải qua với video của chúng tôi.
Chúng ta hãy đi trước và nhìn vào âm thanh trong một giây.
Làm cái này lớn hơn một chút đi.
Những gì tôi có ở đây là tôi chỉ có một liên kết đến cùng một bài hát hai lần.
Trong phiên bản đầu tiên của tôi, bạn có thể thấy rằng tôi được cung cấp một thanh âm thanh nhỏ,
bởi vì tôi chắc chắn để sử dụng điều khiển.
Và nếu tôi chơi, nó sẽ tiếp tục và chơi toàn bộ bài hát.
Tuy nhiên trong lựa chọn thứ hai của tôi, bạn có thể thấy tôi đã thêm, ngay tại đây, các t= 15:35.
Tôi đã thiết lập nó cho bạn để
bạn thực sự nhận được để nghe bài hát từ khi phần thú vị thực sự khởi đầu.
Vì vậy, đây chỉ là một số ví dụ đơn giản về cách bạn sử dụng các thẻ để hiển thị
âm thanh video của bạn.
Và tôi thực sự hy vọng rằng khi bạn đang lập trình, bạn chắc chắn gõ mọi thứ cùng, và
gây rối với mọi thứ, và chơi với mọi thứ để thực sự cảm nhận về cách các video này và
tất cả các thẻ HTML5 khác nhau đang hoạt động.
Vì vậy, một trong những điều tôi nói với mọi người, những người đã được mã hóa trong
các phiên bản khác của HTML và không thực sự muốn thay đổi sang HTML5.
Rằng có rất nhiều lý do mà bạn muốn thực hiện chuyển đổi đơn giản nhanh chóng này.
Và plugin là một ví dụ tuyệt vời.
Kể từ trước HTML5, không có tiêu chuẩn, plugsins được yêu cầu.
Vì vậy, những gì chúng tôi muốn làm là đi trước và
thậm chí nếu nó không được hỗ trợ tại thời điểm này, tiếp tục và sử dụng thẻ này,
hiểu rằng một số trình duyệt của tôi vẫn yêu cầu Flash để chơi chúng.
Cuối cùng, chúng ta hãy nói về các vấn đề về khả năng truy cập.
Khi bạn định sử dụng video hoặc âm thanh, giống như với bất kỳ loại
nội dung không theo ngữ cảnh nào, bạn muốn đảm bảo rằng bạn cung cấp bất kỳ loại mô tả văn bản và
phụ đề chi tiết hoặc nội dung tương đương khác.
Bạn muốn đảm bảo rằng bạn cũng cung cấp bất kỳ liên kết nào đến các plugin.
Nếu không, bạn đang khá nhiều chỉ để lại với một số
loại biểu tượng bị hỏng nhỏ trống mà mọi người không phải lúc nào cũng hiểu.
Và cuối cùng, điều quan trọng nhất tôi muốn các bạn lấy đi từ buổi nói chuyện này,
ngoài việc có thể sử dụng mã,
là đa phương tiện nên thực sự nâng cao nội dung của bạn.
Anh không muốn nó là một sự phân tâm.
Bạn không muốn mọi người dành thời gian cố gắng tìm ra cách tắt nó để
họ có thể, để thực sự truy cập vào nội dung của trang của bạn.
Cảm ơn.