Nền video Html không hoạt động cho iOS trên khung Ionic

Tôi đang cố gắng để có nền video toàn màn hình cho Ionicứng dụng của mình , nó hoạt động hoàn toàn tốt trên Android và Trình duyệt, nhưng khi tôi chạy ứng dụng trên iPhone trong trình giả lập Xcode, đó chỉ là nền trắng và video không tải .

Mã HTML:

 <div class="fullscreen-bg">
    <video autoplay loop muted playsinline webkit-playsinline>
      <source src="/assets/videos/background.mp4" type="video/mp4">
    </video>
 </div>

Mã CSS:

.fullscreen-bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  height: 100vh;
}

Tôi cũng đã thêm cái này vào trong tệp config.xml

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

Tui bỏ lỡ điều gì vậy?

— Courtney trắng
nguồn

Bạn đã thử với đường dẫn 'bản địa' tuyệt đối file:///android_asset/www/chưa?

— johannchopin

Bạn có chắc chắn rằng codec video của video của bạn hoạt động trên ios?

— giàn giáo

"Tui bỏ lỡ điều gì vậy?" - bạn đã làm gì cho đến nay để thử và gỡ lỗi này?

— CBroe

@johannchopin Ionic tuyên bố rõ ràng để sử dụng đường dẫn tài sản mà tôi đã đăng, nó hoạt động với mọi tài nguyên khác (tải SVG, JPG và các tài sản khác). scaff mp4 sử dụng codec h.264, được hỗ trợ trên các thiết bị iOS: i.imgur.com/lij4wwo.png CBroe Tôi đã thử kiểm tra nhật ký hệ thống Simulator, cũng như bảng điều khiển gỡ lỗi trong Safari nhưng dường như không thể tìm hoặc tạo bất kỳ thông báo lỗi liên quan đến nền video.

— Courtney White

Có thể cố gắng thêm một vị trí tuyệt đối vào mã CSS.

— Dmytro Cheglakov

Câu trả lời:

Bạn đang sử dụng UIWebView hoặc WKWebView? Nếu bạn đang sử dụng UIWebView, tôi khuyên bạn nên nâng cấp vì nó không còn được chấp nhận bởi apple khi bạn xuất bản ứng dụng của mình.

Có rất nhiều thông tin lỗi thời cho cả hai từ ion. Hãy chắc chắn rằng bạn đang xem xét mới nhất.

https://github.com/ionic-team/cordova-plugin-ionic-webview

Nếu bạn đang sử dụng WKWebView, bạn nên làm như sau:

Thêm ion: vào các mục mặc định-src và media-src của chính sách bảo mật nội dung của bạn. Làm điều đó trên đầu trang của bất cứ điều gì bạn đã có ở đó.

<meta http-equiv="Content-Security-Policy" 
  content="default-src * 'self' ionic: data: gap: 
  https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline';
  media-src * ionic: 'unsafe-inline';">

Sau đó, trong * .component.ts của bạn có được một URL video cục bộ hoạt động bằng cách sử dụng

/*declarations*/
private win: any = window;
videoURL: string;

/* put this on onInit or a function you call to return your src
it will return "ionic://localhost/_app_file_/assets/videos/background.mp4"*/

this.videoUrl = this.win.Ionic.WebView.convertFileSrc('/assets/videos/background.mp4');


/* then in your html*/
 <div class="fullscreen-bg">
    <video autoplay loop muted playsinline webkit-playsinline>
      <source src={{videoUrl}}>
    </video>
 </div>

— Yvette Ochoa
nguồn

Tôi đã gặp vấn đề tương tự gần đây và cách duy nhất tôi tìm thấy là không sạch sẽ và chỉ là tạm thời nhưng nó hoạt động. Tôi sử dụng iframe.

Đây là mã Ionic của tôi

<div class="video">
    <iframe [src]='videoUrl'></iframe>
</div>

Tôi gọi một iframe có URL từ máy chủ của mình để trả về video ở định dạng HTML. Đây là kết xuất HTML

Bằng cách này, tôi không có vấn đề gì trên iOS.

Tất nhiên đây là một giải pháp tạm thời, sẽ tốt hơn nhiều nếu tìm một giải pháp mà không cần thông qua Iframe

Hy vọng sẽ giúp bạn

— D_Loki
nguồn