आश्चर्य है कि क्या आप मदद कर सकते हैं। मैं एक वर्डप्रेस साइट पर पृष्ठभूमि mp4 जोड़ने की कोशिश कर रहा हूं जिसे मैं क्लाइंट के लिए विकसित कर रहा हूं। मैंने समझाया है कि डेटा उपयोग के कारण यह एक बुरा विचार है लेकिन वह जिद कर रहा है।

जब मैंने mp4 जोड़ा, तो मैं जल्दी से समझ गया कि डिफ़ॉल्ट रूप से यह क्रिया समर्थित नहीं है। हालांकि, एक कामकाज होना चाहिए। मैंने यहां पोस्ट पढ़ी हैं और बड़े पैमाने पर गुगल किया है।

अब तक, मैं जो लेकर आया हूं वह हल करने के लिए @media का उपयोग कर रहा है।

@media screen and (min-width: 600px) {
.header-video {
    display: block !important;
}
}

हालांकि, यह भी काम नहीं लग रहा है। क्या GIF बनाने के अलावा और कोई तरीका है?

अतिरिक्त HTML कोड: -- मुझे MP4 के साथ वीडियो लूप टैग में दिलचस्पी है

<div id="main-content">


			
				<article id="post-54" class="post-54 page type-page status-publish hentry">

				
					<div class="entry-content">
					<div id="et-boc" class="et-boc">
			
			<div class="et_builder_inner_content et_pb_gutters3"><div class="et_pb_section et_pb_section_0 header-video et_pb_section_video et_pb_preload et_pb_with_background et_section_regular">
				
				
				<span class="et_pb_section_video_bg">
					
			<video loop="loop" autoplay playsinline muted >
				<source type="video/mp4" src="http://fortuna-x.com/wp-content/uploads/2018/07/Deep-Network-Green-Blue.mp4" />
				
			</video>
				</span>
				
					<div class="et_pb_row et_pb_row_0">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough et_pb_column_empty">
				
				
				
			</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_2_3 et_pb_column_1    et_pb_css_mix_blend_mode_passthrough et-last-child et_pb_column_empty">
				
				
				
			</div> <!-- .et_pb_column -->
				
				
			</div> <!-- .et_pb_row --><div class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters150">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_2    et_pb_css_mix_blend_mode_passthrough">
				
2
Martin Graham 2 अगस्त 2018, 13:04
क्या आप अधिक कोड (एचटीएमएल) प्रदान कर सकते हैं?
 – 
yacine benzmane
2 अगस्त 2018, 13:07
1
बहुत सारे मोबाइल ब्राउज़र किसी वीडियो को चलाने की अनुमति तभी देते हैं, जब वह किसी उपयोगकर्ता कार्रवाई (autoplay और JS के साथ ट्रिगर प्ले को ब्लॉक कर दिया जाता है) द्वारा ट्रिगर किया जाता है, जिससे वीडियो पृष्ठभूमि मोबाइल पर आम तौर पर अविश्वसनीय हो जाती है। आपको बस अपने क्लाइंट को तकनीकी सीमाओं की व्याख्या करनी होगी, या कम से कम यह सुनिश्चित करना होगा कि आप एक अच्छा फ़ॉलबैक प्रदान करें।
 – 
DBS
2 अगस्त 2018, 13:08
एसओ में आपका स्वागत है। सहायता केंद्र का भ्रमण करें ">अच्छा प्रश्न कैसे पूछें। यदि आप कोई कोड प्रदान नहीं करते हैं तो हम आपकी सहायता नहीं कर सकते - देखें कि एक न्यूनतम प्रतिलिपि प्रस्तुत करने योग्य उदाहरण कैसे बनाया जाता है
 – 
Pete
2 अगस्त 2018, 13:34
क्या आप हमें बता सकते हैं कि आप किस वर्डप्रेस थीम और पेज बिल्डर का उपयोग कर रहे हैं?
 – 
Nirmohi
2 अगस्त 2018, 14:45
आप टैबलेट या आईपैड या एंड्रॉइड के लिए चाहते हैं?
 – 
charan kumar
2 अगस्त 2018, 14:53

2 जवाब

अप्रैल, 2018 तक। Chrome Autoplay नीति है बदला हुआ। साइट पर अपने वीडियो को ऑटोप्ले करने के लिए, आपका मीडिया एंगेजमेंट स्कोर उच्च होना चाहिए। डॉक्स से उदाहरण।

उदाहरण 1: हर बार जब कोई उपयोगकर्ता अपने लैपटॉप पर VideoSubscriptionSite.com पर जाता है तो वे कोई टीवी शो या मूवी देखते हैं। चूंकि उनका मीडिया जुड़ाव स्कोर अधिक है, इसलिए ऑटोप्ले की अनुमति है।

उदाहरण 2: GlobalNewsSite.com में टेक्स्ट और वीडियो सामग्री दोनों हैं। अधिकांश उपयोगकर्ता पाठ्य सामग्री के लिए साइट पर जाते हैं और कभी-कभार ही वीडियो देखते हैं। उपयोगकर्ताओं का मीडिया सहभागिता स्कोर कम है, इसलिए यदि कोई उपयोगकर्ता किसी सोशल मीडिया पेज या खोज से सीधे नेविगेट करता है तो ऑटोप्ले की अनुमति नहीं दी जाएगी।

उदाहरण 3: LocalNewsSite.com में टेक्स्ट और वीडियो सामग्री दोनों हैं। अधिकांश लोग होमपेज के माध्यम से साइट में प्रवेश करते हैं और फिर समाचार लेखों पर क्लिक करते हैं। डोमेन के साथ उपयोगकर्ता की सहभागिता के कारण समाचार लेख पृष्ठों पर ऑटोप्ले की अनुमति होगी। हालांकि, यह सुनिश्चित करने के लिए ध्यान रखा जाना चाहिए कि उपयोगकर्ता ऑटोप्लेइंग सामग्री से आश्चर्यचकित न हों।

उदाहरण 4: MyMovieReviewBlog.com उनकी समीक्षा के साथ जाने के लिए मूवी ट्रेलर के साथ एक आईफ्रेम एम्बेड करता है। उपयोगकर्ता ने विशिष्ट ब्लॉग पर जाने के लिए डोमेन के साथ इंटरैक्ट किया, इसलिए ऑटोप्ले की अनुमति है। हालांकि, सामग्री को ऑटोप्ले करने के लिए ब्लॉग को स्पष्ट रूप से उस विशेषाधिकार को iframe को सौंपने की आवश्यकता है।

मौसम की जांच करने के लिए आपका मीडिया स्कोर इतना अधिक है कि आप इसे इस तरह जांच सकते हैं।

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

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

1
Gregor Ojstersek 2 अगस्त 2018, 13:40
उत्तर के लिए धन्यवाद, ग्रेगर। मैं जिस mp4 को चलाने की कोशिश कर रहा हूं वह डिजाइन का हिस्सा है न कि सामग्री का। यह पीसी पर ऑटो-प्ले ठीक है। प्रतिबंध मोबाइल फोन पर डेटा बचाने के लिए पृष्ठभूमि मीडिया नहीं चलाने पर आधारित है।
 – 
Martin Graham
2 अगस्त 2018, 14:31

सबसे अच्छा तरीका है कि आप मोबाइल के लिए वीडियो पृष्ठभूमि जोड़ने के लिए किसी भी वर्डप्रेस प्लगइन का उपयोग कर सकते हैं... जैसे https://envato.com/blog/plugins-video-backgrounds/

0
Shahid Mulani 2 अगस्त 2018, 15:34
मेरे पास पहले से ही पृष्ठभूमि है - समस्या यह है कि यह मोबाइल पर नहीं चलती है। मैं एक कामकाज की तलाश में हूं :)
 – 
Martin Graham
2 अगस्त 2018, 15:42
यह ऑटो प्ले बैकग्राउंड वीडियो है... ??
 – 
Shahid Mulani
2 अगस्त 2018, 15:56
अगर वीडियो ऑटो प्ले वीडियो है तो आपको निम्न लिंक देखने की जरूरत है... aerserv.com/blog/…
 – 
Shahid Mulani
2 अगस्त 2018, 15:58
हाय शाहिद - धन्यवाद, लेकिन मुझे ऐड-ऑन की आवश्यकता नहीं है, सभी ऐड-ऑन समान हैं, वे मूल रूप से मोबाइल डिवाइस का समर्थन नहीं करते हैं। जब वीडियो अपने आप नहीं चलता है तो वे सभी एक पृष्ठभूमि छवि पर वापस आ जाते हैं।
 – 
Martin Graham
2 अगस्त 2018, 16:03
हाय शाहिद - मुझे आपका दूसरा लिंक याद आया, क्षमा करें। जानकारी के लिए धन्यवाद।
 – 
Martin Graham
2 अगस्त 2018, 16:23