Question

Tôi đang sử dụng thẻ video HTML5 để phát video trong ứng dụng ionic của mình. Đây là mã của tôi:

<video autoplay loop class="video" webkit-playsinline> 
    <source src="videos/polina.mp4" type='video/mp4; codecs="h.264"' > 
    <source src="videos/polina.webm" type="video/webm"> 
</video> 

Video tự động phát, tuy nhiên video mở ra trình phát gốc và không phát nội tuyến. Sau khi một số nghiên cứu tôi hiểu rằng webkit-playsinline nên giải quyết vấn đề này, ít nhất là trên iOS, nhưng điều này dường như không phải là trường hợp của tôi thử nghiệm trên iOS8 & 9.

Tôi đã thử quay phim và tôi vẫn đang nhận các cầu thủ bản địa thổi xuất hiện.

Tôi thậm chí đã trả một chút để nhận mã này tại đây: https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video minh họa chính xác những gì tôi đang cố tạo (video nền trên màn hình đăng nhập của tôi) nhưng video vẫn mở ra trong trình phát gốc.

Có ai đã quản lý để phát video trực tuyến trên ứng dụng ionic/phonegap của họ không? Nếu thế thì sao?

Answer 1

Lý do tại sao UIWebView không được định cấu hình để cho phép phát lại video nội tuyến. Trên iPad, nó được mặc định cho phép, nhưng trên iPhone thì không.

Bạn có thể dễ dàng cho phép điều này bằng cách thêm này để config.xml của bạn: sau đó

<preference name="AllowInlineMediaPlayback" value="true" /> 

Các UIWebView nên tôn trọng webkit-playsinline.

Ngoài ra, mã cũng sẽ hoạt động trên hầu hết các thiết bị Android (đặc biệt nếu bạn thêm plugin Crosswalk). Tuy nhiên, bạn nên đặt webm trước, sau đó là tệp mp4 để tránh sự cố với một số phiên bản Chrome).

Bạn cũng nên thêm một poster = "firstFrame.jpg" vào thẻ video để bạn có được hình ảnh trong khi video sẵn sàng phát. Jpg nên là khung đầu tiên của video (sử dụng bất kỳ trình chỉnh sửa video nào bạn muốn trích xuất).

Xem trang web này để biết ví dụ hoàn chỉnh hơn (và miễn phí ...). Tôi đã sử dụng tính năng này trên Android/iOS với Cordova với những thay đổi tối thiểu. Những thay đổi cần thiết là tải các tệp vào dự án, sử dụng CrossWalk cho Android, xóa bộ chọn phương tiện trong css (nó dừng video trên màn hình nhỏ theo thiết kế, nhưng nó hoạt động tốt ở Cordova), thêm thuộc tính playsinline và cuối cùng thêm vào tùy chọn trong tệp config.xml.

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video