Âm thanh html5 ẩn thanh tiến trình
HTML5 giới thiệu hỗ trợ phương tiện tích hợp với thẻ âm thanh, giúp dễ dàng nhúng phương tiện trực tiếp vào bất kỳ tài liệu HTML nào với mã hạn chế. Nó đi kèm với các điều khiển trình duyệt tích hợp, nếu bạn chỉ định và phát âm thanh hay và hiệu quả Show Đây thường là giao diện trong trình duyệt của bạn bạn có thể đang nghĩ. “Nếu tôi muốn tạo kiểu cho trình phát âm thanh của riêng mình bằng các nút và thanh cuộn riêng thì sao?” Với phần tử âm thanh, phần tử tiến trình và một vài nút, bạn có thể tạo trình phát âm thanh của riêng mình ngay lập tức. Phần tử tiến trình chủ yếu được sử dụng để theo dõi việc hoàn thành một tác vụ và có thể được thao tác dễ dàng bằng Javascript. Trong trường hợp của chúng tôi, nó sẽ theo dõi độ dài của một bài hát. Và điều tuyệt vời là HTML5 và các khả năng của trình duyệt giúp bạn dễ dàng lấy thời lượng bài hát, thời gian hiện tại, v.v. Nếu bạn muốn chơi với mã, hãy bắt đầu. Thật không may, các bản nhúng Codepen không hoạt động với tôi nên liên kết ở bên dưới Xem trên Codepen tại đây Và dưới đây là mã. Lưu ý rằng chúng là hai chức năng riêng biệt. Một theo dõi trình phát âm thanh thực sự phát âm thanh (chức năng initPlayers) và một theo dõi âm thanh cho phần tử tiến trình (chức năng initProgressBar). Tôi đã cố gắng giữ jQuery ở mức tối thiểu nhưng đã sử dụng nó để thực sự gọi hàm, xin lỗi, tôi không xin lỗi những người theo chủ nghĩa thuần túy JS Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, tôi sẽ lắng nghe. Gửi email cho tôi tại luke. sẽ. duncan@gmail. com hoặc đánh tôi trên twitter @luke__duncan Tài liệu và ví dụ về cách sử dụng các thanh tiến trình tùy chỉnh của Bootstrap có hỗ trợ cho các thanh xếp chồng lên nhau, hình nền động và nhãn văn bản Làm thế nào nó hoạt độngCác thành phần tiến trình được xây dựng với hai thành phần HTML, một số CSS để đặt chiều rộng và một vài thuộc tính. Chúng tôi không sử dụng phần tử HTML5 6, đảm bảo bạn có thể xếp chồng các thanh tiến trình, tạo hiệu ứng động cho chúng và đặt nhãn văn bản lên trên chúng
Đặt tất cả lại với nhau, và bạn có các ví dụ sau
Bootstrap cung cấp một số tiện ích để thiết lập chiều rộng. Tùy thuộc vào nhu cầu của bạn, những điều này có thể giúp nhanh chóng cấu hình tiến độ
nhãnThêm nhãn vào thanh tiến trình của bạn bằng cách đặt văn bản trong 0________số 8 Chiều caoChúng tôi chỉ đặt giá trị 6 trên 7, vì vậy nếu bạn thay đổi giá trị đó, thì 0 bên trong sẽ tự động thay đổi kích thước cho phù hợp 1Tầng lớpSử dụng các lớp tiện ích nền để thay đổi giao diện của các thanh tiến trình riêng lẻ 2Nhiều thanhBao gồm nhiều thanh tiến trình trong một thành phần tiến trình nếu bạn cần 3sọcThêm 9 vào bất kỳ 0 nào để áp dụng một sọc qua CSS gradient trên màu nền của thanh tiến trình
hoạt hình sọcĐộ dốc sọc cũng có thể được làm động. Thêm 1 vào 0 để tạo hoạt ảnh cho các sọc từ phải sang trái thông qua hoạt ảnh CSS3 Bạn có thể sử dụng các phần tử 90 và 91 của HTML5 để phát trực tuyến các tệp đa phương tiện mà không cần trình cắm riêngSử dụng JavaScript, quá trình phát lại có thể được kiểm soát bằng. Phần tử âm thanh và video được sử dụng làm phần tử phương tiện kế thừa tất cả các thuộc tính và phương thức của giao diện 92 (trong , và ứng dụng)Các tính năng chính của phần tử âm thanh và video với JavaScript bao gồm Tạo Trình phát âm thanh và videoĐể cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách tạo trình phát đơn giản để phát lại trực tuyến
Mã nguồnĐể biết mã nguồn hoàn chỉnh liên quan đến trường hợp sử dụng này, hãy xem các tệp sau Để cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách phát và tạm dừng các tệp phương tiện bằng các điều khiển tùy chỉnh
Mã nguồnĐể biết mã nguồn hoàn chỉnh liên quan đến trường hợp sử dụng này, hãy xem các tệp sau Để cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách truy xuất tổng thời lượng và thời gian phát của tệp phương tiện
Mã nguồnĐể biết mã nguồn hoàn chỉnh liên quan đến trường hợp sử dụng này, hãy xem các tệp sau Để cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách di chuyển vị trí phát trên dòng thời gian
Mã nguồnĐể biết mã nguồn hoàn chỉnh liên quan đến trường hợp sử dụng này, hãy xem các tệp sau Hiển thị trạng thái tiến độĐể cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách kiểm tra trạng thái tiến trình tải xuống của nội dung phương tiện
Mã nguồnĐể biết mã nguồn hoàn chỉnh liên quan đến trường hợp sử dụng này, hãy xem các tệp sau Thay đổi kích thước màn hình videoĐể cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách thay đổi kích thước màn hình video
Mã nguồnĐể biết mã nguồn hoàn chỉnh liên quan đến trường hợp sử dụng này, hãy xem các tệp sau Tizen hỗ trợ các định dạng phương tiện sau
Để cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách kiểm tra xem có thể phát dữ liệu phương tiện của loại MIME được chỉ định hay không
Mã nguồnĐể biết mã nguồn hoàn chỉnh liên quan đến trường hợp sử dụng này, hãy xem các tệp sau Xử lý lỗiĐể cung cấp cho người dùng các tính năng âm thanh và video HTML5, bạn phải học cách xử lý các lỗi có thể xảy ra trong quá trình phát lại
Mã nguồnĐể biết mã nguồn hoàn chỉnh liên quan đến trường hợp sử dụng này, hãy xem các tệp sau Codec được hỗ trợCác bảng sau đây liệt kê các codec được hỗ trợ trong Tizen Bàn. codec được hỗ trợ TypeCodecEncoderDecoderVideoMPEG-1NoYesVideoMPEG-4 phần 2YesYesVideoMPEG-4 phần 2 MS v1NoYesVideoMPEG-4 phần 2 MS v2YesYesVideoMPEG-4 phần 2 MS v3YesYesVideoH. 264, H. 263-1996, H. 263+, H263-1998, H263 v2CóCóVideoH. 264, MPEG-4 AVC, MPEG-4 part10NoYesVideoWMV3NoYesVideoVC1NoYesVideoTHEORAYesYesAudioAACNoYesAudioMP3NoYesAudioWMA (Có sẵn tối đa WMA8. WMA9 không khả dụng. )KhôngCóÂm thanhAMR-NBCóCóÂm thanhAMR-WBKhôngCóÂm thanhVORBISCóCó |