2016-12-22 21 views
7

Tôi có nguồn cấp dữ liệu nội dung Instagram bao gồm các bài đăng gần đây. Nếu bài đăng là video mà video hiển thị như vậy: video HTML5 có tính năng tự động phát, vòng lặp và tắt tiếng.Trình duyệt Safari nhảy để hiển thị video tự động phát HTML5

Về mặt thẩm mỹ, kết quả là rất dễ chịu; tuy nhiên trong Safari khi video đã tải xong, trình duyệt sẽ bỏ qua trang web đến vị trí của video. Nó không làm điều này trong Chrome.

Video không phải là nội dung chính nên tôi không muốn nó bỏ qua trang.

Câu hỏi

  1. Có một tiêu chuẩn W3C cho autoplay? tức là safari hoặc chrome đang sử dụng phương pháp mặc định

  2. Cách tốt nhất để khắc phục điều này là gì?

Suy nghĩ về soultion

tôi có thể tắt autoplay và thay vào đó kích hoạt chơi với JS. Tuy nhiên điều này có vẻ hơi không cần thiết và tạo ra một sự phụ thuộc mới.

+3

W3C dường như không nói nếu video autoplay sẽ tự động di chuyển đến tập trung, do đó, không nghĩ rằng có quyền hoặc sai. Tùy chọn của tôi là xóa bỏ tự động phát và có người dùng nhấp để bắt đầu bất kỳ video nào - nghĩa là người dùng luôn xem video ngay từ đầu và kiểm soát việc sử dụng băng thông – Offbeatmammal

+0

Cảm ơn @Offbeatmammal Tôi biết về các tác động của UX. Gây phiền nhiễu rằng safari dường như ép buộc điều này. – slawrence10

+0

Tôi đã gặp sự cố tương tự với trang web mà tôi đang làm việc. Tôi đã thử xóa thuộc tính autoplay và kích hoạt video phát sau khi hết thời gian chờ trong JS. Tuy nhiên, ngay sau khi video được kích hoạt để phát, Safari sẽ nhảy xuống video như trước đây. –

Trả lời

1

* Cập nhật: Hạn chế cuộn dài tới 1500 đơn vị cho đến 2 giây sau khi video bắt đầu chơi ...

<html> 
<head> 
    <script type="text/javascript"> 
    var scrollPosition = 0; 
    var videoLoaded = false; 
    function bodyOnScroll() { 
    // this 1500 value might need to be tweaked less or more depending 
    // on how far the scroll to your video is 
    if(Math.abs(document.body.scrollTop - scrollPosition) > 1500 && !videoLoaded) 
    { 
    // don't scroll 
    document.body.scrollTop=scrollPosition; 
    } 
    else 
    { 
    // reload the variable to match current position 
    scrollPosition=document.body.scrollTop; 
    } 
    } 
    function videoOnPlaying(){ 
    // wait 2 seconds and then disable the max scrollPosition 
    // might want to tweak this too depending 
    setTimeout(function() { 
     videoLoaded = true; 
    }, 2000); 
    } 
    </script>  
</head> 
<body onScroll="bodyOnScroll();"> 
<video autostart onPlay="videoOnPlaying();"></video> 
+0

Hey @pizzaslice cảm ơn sự đóng góp của bạn Hiểu được các tác động của UX.Thật không may giải pháp của bạn hiện đang làm điều tương tự như vấn đề của tôi ... nó nhảy người dùng ở đâu đó trên trang khi tải video. – slawrence10

Các vấn đề liên quan