Html5 video và audio đính kèm Player (mp3, mp4, ogg,webm,wav)

[PVS]

Html5 video và audio đính kèm Player (mp3, mp4, ogg,webm,wav)

Đây là một cách nhanh chóng và dễ dàng để chơi file đính kèm âm thanh và các tập tin video trong diễn đàn của bạn thay vì tải về nó.

Tôi đã gỡ bỏ các player bây giờ và nó hoạt động hoàn toàn vào html5 nhưng có thể không hoạt động trên một số trình duyệt cho một số phần mở rộng.

Đầu tiên: thêm phần mở rộng tập tin đính kèm mà bạn muốn trong trang tùy chọn tập tin đính kèm, như mp3, mp4, webm. Những điều khác không phải là phổ biến.

Trong template "attached_files" tìm:
(appearance > templates > attached_files)

<h6 class="filename"><a href="{xen:link attachments, $attachment}" target="_blank">{$attachment.filename}</a></h6>

Bên dưới nó thêm code sau cho audio player:

<xen:if is="{$attachment.extension} == 'mp3' ">
     <audio  width="auto" height="24" src="{xen:link attachments, $attachment}" controls="controls" preload="none">

     </audio>
</xen:if>

Thay mp3 với wav nếu bạn muốn

Tôi không chắc chắn làm thế nào để thêm nhiều phần mở rộng tập tin đính kèm trong code này như thể hiện bên dưới câu này:

<xen:if is="{$attachment.extension} == 'mp3' ||'wav' ">

Đối với một số trình duyệt một số phần mở rộng có thể không làm việc vì vậy tôi đề nghị bạn đi đến địa chỉ này để xem các trình duyệt hỗ trợ những gì phần mở rộng tập tin đính kèm. http://www.w3schools.com/html/html5_audio.asp

Bạn cũng có thể thêm các tương tự cho một player đính kèm video như này, thêm nó bên dưới code audio nếu bạn thêm một trong đầu tiên:

  <xen:if is="{$attachment.extension} == 'webm' ">
     <video  width="auto" height="240" src="{xen:link attachments, $attachment}" controls="controls" preload="metadata">

     </video>
</xen:if>

Thay webm với mp4 hay ogg nếu bạn muốn.

Một số tập tin đính kèm có thể không làm việc một lần nữa trong các trình duyệt nhất định để kiểm tra: http://www.w3schools.com/html/html5_video.asp

Các thuộc tính preload làm cho nó để băng thông của bạn sẽ không bị lãng phí. Tôi đã sử dụng siêu dữ liệu cho các đoạn video để mọi người có thể nhìn thấy một hình ảnh thu nhỏ. Nhưng bạn có thể chỉ là một cách dễ dàng đặt nó là "none" như âm thanh nếu bạn muốn.

đây là một số thuộc tính khác bạn có thể thêm hoặc loại bỏ:

Các thuộc tính tùy chọn
= Mới trong HTML5.

AttributeValueDescription
autoplay Chỉ định rằng video sẽ bắt đầu chơi ngay khi nó đã sẵn sàng
controls Chỉ định rằng điều khiển video sẽ được hiển thị (ví dụ như một nút play/pause vv).
height pixels Thiết lập chiều cao của trình phát video
loop Chỉ định rằng video sẽ bắt đầu lại một lần nữa, mỗi khi nó được hoàn thành
muted Chỉ định rằng đầu ra âm thanh của video nên được tắt
poster URL Chỉ định một hình ảnh được hiển thị trong khi đoạn video được tải về, hoặc cho đến khi người dùng chạm vào nút play
preload tự động
metadata
none Chỉ định và cách tác giả cho rằng video sẽ được tải khi tải trang
src URL Chỉ định URL của file video
width pixels Thiết lập chiều rộng của trình phát video

Bạn có thể gây rối xung quanh với css chính mình, nhưng tôi đã làm nó như thế này, trong attached_files.css tìm:

.attachment
        {
            float: left;
            width: 50%;
            max-width: 300px;
        }

Thay thế bằng:

.attachment
        {
            float: left;
            width: 100%;
            max-width: 100%;
        }

Bây giờ bạn nên có một cái gì đó như thế này.

​

Chúc các bạn thành công.

Nguồn: xenforo.com​