آموزش ویدیو در گوگل AMP
4 سال پیش
آموزش ویدیو در گوگل AMP
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ویدیو در گوگل AMP خواهیم پرداخت.
Amp-video در AMP یک ویدیوی html5 استاندارد است که برای پخش جاسازی مستقیم فیلم استفاده می شود. در این درس، به ما نحوه کار و استفاده از amp-video را بیاموزید.
برای کار با amp-video باید اسکریپت زیر را اضافه کنیم –
|
1 2 3 |
<script async custom-element = "amp-video" src = "https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script> |
Amp-video دارای ویژگی src است که منبع ویدئویی برای بارگیری دارد ، که در زمان اجرا به صورت کند توسط amp بارگیری می شود. علاوه بر این، همه ویژگی ها تقریباً مشابه تگ ویدیوی html5 هستند.
در زیر گره هایی که قرار است به amp amp اضافه شوند وجود دارد –
- Source – می توانید با استفاده از این تگ، پرونده های رسانه ای مختلفی را برای پخش اضافه کنید.
- Track – این تگ به شما امکان می دهد زیرنویس های ویدیو را فعال کنید.
- Placeholder – این تگ مکان نگهدارنده قبل از شروع ویدیو محتوا را نشان می دهد.
- Fallback – هنگامی که مرورگر از فیلم HTML5 پشتیبانی نمی کند ، این تگ فراخوانی می شود.
فرمت تگ amp-video
فرمت تگ amp-video در اینجا نشان داده شده است –
|
1 2 3 4 5 6 7 8 9 |
<amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png"> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video> |
همانطور که در زیر نشان داده شده، اجازه دهید ما amp-video را با استفاده از یک مثال مفید درک کنیم –
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Video</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale=1"> <style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both} @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body { -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async custom-element = "amp-video" src = "https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script> </head> <body> <h3>Google AMP - Amp Video</h3> <amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png"> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video> </body> </html> |
خروجی
خروجی کد داده شده در بالا به شرح زیر است –
ویژگی های موجود برای amp-video
ویژگی های موجود برای amp-video در جدول اینجا ذکر شده است –
- src
اگر گره <source> وجود نداشته باشد، src باید مشخص شود و https: // url باشد.
- poster
پوستر آدرس img را می گیرد که قبل از شروع فیلم نمایش داده می شود.
- autoplay
در صورت پشتیبانی مرورگر، داشتن این ویژگی در amp-video باعث پخش خودکار فیلم می شود. ویدئو در حالت بی صدا پخش می شود و کاربر باید بر روی ویدیو ضربه بزند تا بی صدا شود.
- controls
داشتن این ویژگی در amp-video کنترل های موجود در ویدیو را شبیه ویدیوی html5 نشان می دهد.
- loop
اگر این ویژگی در amp-video وجود داشته باشد ، پس از اتمام ویدیو دوباره پخش می شود.
- crossorigin
اگر منبعی برای پخش فیلم از منبع دیگری باشد، این ویژگی به تصویر می آید.
- rotate-to-fullscreen
اگر ویدئو قابل مشاهده است ، پس از اینکه کاربر دستگاه خود را به حالت افقی در آورد ، فیلم تمام صفحه نمایش می یابد
پخش خودکار ویدئو AMP
ما می توانیم از ویژگی پخش خودکار در صورت نیاز به پخش خودکار فیلم استفاده کنیم. این ویژگی مطابق پشتیبانی مرورگر کار خواهد کرد. توجه داشته باشید که هنگام پخش خودکار ویدئو در حالت بی صدا خواهد بود. وقتی کاربر روی ویدئو ضربه می زند ، بی صدا می شود.
اجازه دهید ویژگی پخش خودکار را با کمک مثال مثالی که در زیر آورده شده است به ما ارائه دهید –
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Video</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width=device-width,minimum-scale = 1, initial-scale = 1"> <style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both; -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async custom-element = "amp-video" src = " https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script> </head> <body> <h3>Google AMP - Amp Video Autoplay</h3> <amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png" autoplay> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video> </body> </html> |
همانطور که در کد زیر نشان داده شده است ، می توانید کنترل ها را به ویدئو فعال کنید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png" autoplay> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video> |
لیست جلسات قبل آموزش گوگل AMP
- آموزش گوگل AMP
- بررسی اجمالی گوگل AMP
- مقدمه گوگل AMP
- آموزش تصاویر در گوگل AMP
- آموزش فرم در گوگل AMP
- آموزش Iframes در گوگل AMP
- آموزش ویدیو در گوگل AMP
- آموزش دکمه در گوگل AMP
- آموزش Timeago در گوگل AMP
- آموزش Mathml در گوگل AMP
- آموزش تگ Fit Text در گوگل AMP
- آموزش شمارش معکوس تاریخ در گوگل AMP
- آموزش انتخاب کننده تاریخ در گوگل AMP
- آموزش استوری در گوگل AMP
- آموزش انتخاب کننده در گوگل AMP
- آموزش لینک در گوگل AMP
- آموزش فونت در گوگل AMP
- آموزش لیست در گوگل AMP
- آموزش اعلان کاربر در گوگل AMP
- آموزش next page در گوگل AMP
- آموزش ویژگی ها در گوگل AMP
- آموزش استایل ها و CSS سفارشی در گوگل AMP
- آموزش کلاس های CSS پویا در گوگل AMP
- آموزش اکشن ها و رویدادها در گوگل AMP
- آموزش انیمیشن در گوگل AMP
- آموزش اتصال داده در گوگل AMP
- آموزش طرح بندی در گوگل AMP
- آموزش تبلیغات در گوگل AMP
- آموزش تجزیه و تحلیل در گوگل AMP
- آموزش ویجت های اجتماعی در گوگل AMP
- آموزش نحو در گوگل AMP
- آموزش اعتبار سنجی در گوگل AMP
- آموزش اجزا جاوا اسکریپت در گوگل AMP
نویسنده مطلب
saber
.svg)
دیدگاه شما