آموزش قراردادن ویدیوهای HTML5 در ایمیل

1396/11/7
مهدی پیوندی
0

محتوا پنهان

1 پشتیبانی برنامه های مشاهده ایمیل یا ایمیل خوان

2 کد نمایش ویدیو

3 نمایش تصویر جایگزین در برنامه های مختلف

4 Apple Mail

5 iOS 10

6 برنامه ایمیل خوان سامسونگ

6.1 کد کامل:

7 فرمت های قابل پخش

8 آیا باید در ایمیل های خود از ویدیو استفاده کنیم؟

ما در این مطلب از مجموعه مقالات آموزش ایمیل مارکتینگ گویا آی تی روش قراردادن ویدیوهای HTML5 در ایمیل را به شما آموزش می دهیم تا بتوانید ویدیوهای خود را مستقیماً در برنامه های ایمیل خوانی که از این دست ایمیل ها پشتیبانی می کنند پخش کنید. علاوه بر این، به روش هایی برای نمایش تصویر جایگزین در برنامه هایی که از این ویدیوها پشتیبانی نمی کنند نیز اشاره خواهیم کرد.

پشتیبانی برنامه های مشاهده ایمیل یا ایمیل خوان

همانطور که در جدول زیر مشاهده می کنید، پشتیبانی از ویدیوهای HTML5 هنوز هم نسبتاً محدود است. برنامه هایی همچون ایمیل خوان پیش فرض iOS، Apple Mail و برنامه ایمیل خوان سامسونگ این امکان را برای دریافت کننده ایمیل فراهم می کنند تا ویدیوی شما را در خود ایمیل تماشا کند. سایر برنامه ها، مانند جیمیل و برنامه های اندروید به جای ویدیو یک تصویر جایگزین را به نمایش در می آورند.

کد نمایش ویدیو

به کمک کد زیر می توانید ویدیوی مورد نظر خود را در برنامه هایی که از نمایش ویدیو پشتیبانی می کنند به نمایش در بیاورید. با استفاده از این کد، این برنامه ها می توانند با استفاده از اتریبیوت poster پیش از پخش ویدیوی مورد نظر یک تصویر پیش نمایش را برای آن به نمایش در بیاورند. برنامه هایی که از نمایش ویدیو در ایمیل پشتیبانی نمی کنند تصویر درون تگ video که لینک شده را نشان خواهند داد.

نمایش تصویر جایگزین در برنامه های مختلف

متاسفانه بسیاری از برنامه های ایمیل خوان برای نمایش ویدیو با شما همکاری نمی کنند. حتی برخی از برنامه ها مانند برنامه های iOS 8 و اندروید ۴ تصویر پیش نمایش ویدیو را تولید می کنند، اما همچنان امکان پخش ویدیو وجود ندارد که به احتمال قریب به یقین مخاطب را گیج خواهد کرد. بنابراین، بهتر است که برای بخش نمایش تصویر جایگزین یک کد مجزا در نظر بگیریم و بخش ویدیو را به نحوی کدنویسی کنیم که فقط در برنامه هایی ظاهر شود که امکان پخش ویدیو در آنها وجود دارد. کد مورد نظر چیزی شبیه به کد زیر خواهد بود:

<!– video section initially hidden –>
<div class=”video-wrapper” style=”display:none;”>
<p>Video Content: MP4</p>
<video width=”320″ height=”176″ controls=”controls” poster=”https://gooyait.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg” src=”http://www.w3schools.com/html/mov_bbb.mp4″ >
<!– fallback 1 –>
<a href=”https://gooyait.com” ><img height=”176″
src=”https://gooyait.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg” width=”320″ /></a>
</video>
</div>
<!– fallback section initially displayed –>
<div class=”video-fallback”>
<p>Fallback Content</p>
<a href=”https://gooyait.com” ><img height=”176″
src=”https://gooyait.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg” width=”320″ /></a>
</div>

از آنجایی که یاهو کد display:none را حذف می کند، لازم است که کد زیر را به بخش <head> ایمیل خود اضافه کنید:

نمایش ویدیو در برنامه هایی که از پخش ویدیو پشتیبانی می کنند

Apple Mail

ما برای Apple Mail می توانیم از مدیا کوئری (media query) -webkit-min-device-pixel-ratio استفاده کنیم. با این حال، باید از نمایش ویدیو در محیط iOS 8 که ویدیو را پخش نمی کند جلوگیری کنیم. راه حل این مسأله این است که از یک کوئری min-device-width استفاده کنیم که عرض آن بیشتر از عرض محیط نمایش ایمیل در آیپد باشد. جالب اینجاست که این کوئری روی AOL Mail (که از ویدیو پشتیبانی نمی کند) در مرورگرهای webkit (مثل کروم و سافاری) هم کار می کند، اما خوشبختانه AOL Mail فقط تصویر جایگزین و لینکی را نشان می دهد که در تگ video قرار دارد.

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)
{
.video-wrapper { display:block!important; }
.video-fallback { display:none!important; }
}

iOS 10

در محیط ایمیل iOS 7 از ویدیو پشتیبانی می شد، اما در نسخه های ۸ و ۹ این قابلیت حذف شد. اپل مجددا در iOS 10 پشتیبانی از ویدیو را به رابط خود اضافه کرد. متاسفانه با اینکه در iOS 8 و ۹ تصویر ویدیو با یک دکمه پخش به نمایش در می آید، اما ویدیو قابل پخش نیست. ما باید راهی پیدا کنیم تا محتوای ویدیویی فقط در iOS 10 ظاهر شود. خوشبختانه این هم با استفاده از @supports امکانپذیر است. از این طریق، به استفاده از یک CSS متوسل می شویم که فقط در iOS 10 از آن پشتیبانی می شود.

@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
.video-player { display:block !important; }
.video-fallback { display:none !important; }
}

متاسفانه، یاهو به @supports توجهی نمی کند و کد آن را در محیط ایمیل نشان می دهد (یاهو میل در مورد مدیا کوئری ها هم مشکل داشت که این ایراد برطرف شده است). به منظور کسب اطمینان از عدم نمایش CSS موجود در @support در یاهو می توانید از ^= استفاده کنید:

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
div[class^=video-wrapper] { display:block!important; }
div[class^=video-fallback] { display:none!important; }
}

برنامه ایمیل خوان سامسونگ

شاید برنامه ایمیل سامسونگ که به صورت پیش فرض در مجموعه کهکشانی های سامسونگ (گلکسی) نصب شده است زیاد معروف نباشد، اما از پخش ویدیو پشتیبانی می کند. برای نمایش ویدیو در این برنامه می توانید از CSS زیر استفاده کنید:

#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }

کد کامل:

<!doctype html>
<html>
<head>
<title>Video in Email Test</title>
<style type=”text/css”>
.video-wrapper {display:none;}
@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)
{
.video-wrapper { display:block!important; }
.video-fallback { display:none!important; }
}
@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
div[class^=video-wrapper] { display:block!important; }
div[class^=video-fallback] { display:none!important; }
}
#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }
</style>
</head>
<body>
<B>Video in Email Test</B><BR>

<!– video section –>
<div class=”video-wrapper” style=”display:none;”>
<p>Video Content</p>
<video width=”320″ height=”176″ controls=”controls” poster=”https://gooyait.com/images/blog_images/Emailology/2013/html5_video/bunny_cover.jpg” src=”http://www.w3schools.com/html/mov_bbb.mp4″ >
<!– fallback 1 –>
<a href=”https://gooyait.com” ><img height=”176″
src=”https://gooyait.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg” width=”320″ /></a>
</video>
</div>

<!– fallback section –>
<div class=”video-fallback”>
<p>Fallback Content</p>
<a href=”https://gooyait.com” ><img height=”176″
src=”https://gooyait.com/images/blog_images/Emailology/2013/html5_video/bunny_backup.jpg” width=”320″ /></a>
</div>

</body>
</html>

فرمت های قابل پخش

HTML5 از سه فرمت ویدیویی اصلی پشتیبانی می کند: MP4، OGG و WebM. اپل بنا به برخی دلایل مرتبط با مبحث مالکیت معنوی فقط از فرمت MP4 در مرورگرها و برنامه های ایمیل خوان خود پشتیبانی می کند، بنابراین پیشنهاد می شود که شما هم فقط از همین فرمت در ایمیل های خود استفاده کنید.

به علاوه، لازم است که اطمینان پیدا کنید که سرور شما به درستی پیکربندی شده و خروجی MIME درستی دارد تا برنامه ایمیل خوان در هنگام دریافت ویدیو بتواند فرمت مناسب را تشخیص بدهد. به عنوان مثال اگر از وب سرور Apache استفاده می کنید این کد را به فایل .htaccess خود اضافه کنید:

AddType video/mp4 .mp4 .m4v

آیا باید در ایمیل های خود از ویدیو استفاده کنیم؟

اگرچه قراردادن ویدیو در ایمیل زیاد سخت نیست، اما موضوع ساده یا کم اهمیتی هم نیست. برخی از بازاریاب های ایمیلی ترجیح می دهند که از یک دکمه جعلی پخش ویدیو روی یک تصویر استفاده کنند که لینک آن وارد صفحه ای می شود که حاوی ویدیوی مورد نظر است. بسیاری دیگر از گیف های متحرکی استفاده می کنند که حاصل تبدیل ویدیو هستند، چرا که از گیف در همه رابط ها به جز Outlook پشتیبانی می شود.

در عین حال، همه چیز به برند و مخاطبان شما بستگی دارد. با توجه به اطلاعاتی که از مخاطبان خود دارید و به کمک تست های مختلف دوبخشی یا چندبخشی می توانید تاثیر ویدیو را ارزیابی کنید و برای استفاده یا عدم استفاده از ویدیو در ایمیل های خود تصمیم بگیرید.

در هر صورت، اگر در نهایت تصمیم گرفتید که باید از ایمیل استفاده کنید حتماً اطمینان پیدا کنید که ایمیل های شما و ویدیوهای آنها در همه برنامه های ایمیل خوان به درستی به نمایش در می آیند.

دیدگاه خود را وارد کنید