2016-12-22 8 views
7

मेरे पास Instagram सामग्री की एक फ़ीड है जिसमें हालिया पोस्ट शामिल हैं। यदि पोस्ट एक वीडियो है तो यह इस प्रकार प्रदर्शित होता है: ऑटोप्ले, लूप और म्यूट विशेषता वाले HTML5 वीडियो।सफारी ब्राउज़र एचटीएमएल 5 ऑटोप्ले वीडियो प्रदर्शित करने के लिए कूदता है

सौंदर्यशास्त्र से परिणाम बहुत ही सुखद है; हालांकि सफारी में जब वीडियो लोडिंग पूरा हो गया है, तो ब्राउज़र वेब पेज को वीडियो की स्थिति में छोड़ देता है। यह क्रोम में ऐसा नहीं करता है।

वीडियो मुख्य सामग्री नहीं है इसलिए मैं नहीं चाहता कि यह पृष्ठ को छोड़ दें।

प्रश्न

  1. वहाँ ऑटोप्ले के लिए एक W3C मानक है? यानी सफारी या क्रोम डिफ़ॉल्ट दृष्टिकोण ले रहा है

  2. इसका समाधान करने का सबसे अच्छा तरीका क्या है? soultion

    पर

विचार मैं ऑटोप्ले बंद बदल सकती है और इसके बजाय जे एस के साथ खेलने को गति प्रदान। हालांकि यह थोड़ा अनावश्यक लगता है और एक नई निर्भरता बनाता है।

+3

W3C अगर ऑटोप्ले वीडियो स्वचालित रूप से ध्यान केंद्रित करने के लिए स्क्रॉल करना चाहिए कहने के लिए नहीं लगता है, तो नहीं है लगता है कि कोई सही या गलत है। मेरी वरीयता ऑटोप्ले को बंद करना होगा और उपयोगकर्ता किसी भी वीडियो को शुरू करने के लिए क्लिक करेगा - इसका मतलब है कि उपयोगकर्ता हमेशा वीडियो को शुरुआत से देखता है, और बैंडविड्थ उपयोग – Offbeatmammal

+0

को नियंत्रित करता है धन्यवाद @ ओफबीटमैमल मैं यूएक्स प्रभावों से अवगत हूं। परेशान है कि सफारी इसे मजबूर करता है। – slawrence10

+0

मैं उसी वेबसाइट पर चल रहा हूं जिस पर मैं काम कर रहा हूं। मैंने ऑटोप्ले विशेषता को हटाने और जेएस में टाइमआउट के बाद वीडियो चलाने के लिए ट्रिगर करने का प्रयास किया। हालांकि, जैसे ही वीडियो खेलने के लिए ट्रिगर किया जाता है, सफारी वीडियो पर वापस आ जाता है जैसा कि पहले होगा। –

उत्तर

1

* अपडेट किया गया: सीमा पुस्तक 1500 इकाइयों के लिए लंबाई तक 2 सेकंड के बाद वीडियो के शुरू ...

<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

हे @pizzaslice आपके योगदान के लिए धन्यवाद को हटा देता है। यूएक्स प्रभावों को समझें। दुर्भाग्य से आपका समाधान वर्तमान में मेरी समस्या के समान ही है ... यह उपयोगकर्ता को कूदता है वीडियो लोड पर पेज पर कहीं। – slawrence10

संबंधित मुद्दे