مشغل فيديوهات احترافي على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أبريل 29, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

السلام عليكم و مرحبا بكم في مدونة الخبير عامر بشير اليوم لدينا شرح عن اضافة ستايل لفيديوهات في بلوجر 

يمكنك معاينة الاضافة من هنا

طريقة التركيب سهلة جدا 

1. إبحث على  وضع هذا الكود فوقه مباشرة

<style>/*<![CDATA[*/ /*videojs abdoutech*/ @font-face{font-family:player;src:url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.eot);src:url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.eot?#iefix) format("embedded-opentype"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.woff) format("woff"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.ttf) format("truetype"),url(https://file.myfontastic.com/KHcWEPDMMSJ4TjY7FcyyaK/fonts/1480808305.svg#1480808305) format("svg");font-weight:400;font-style:normal}.video-js{max-width:100%;width:auto;max-height:100%;height:auto;position:relative}.video-js .vjs-tech{width:100%;height:100%;display:block}.video-js button,[class*=button]{border:0;background:0 0;outline:0;padding:0;margin:0;display:inline-block;line-height:0;cursor:pointer}.video-js button:before,[class*=button]:before{font-family:player!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:30px;vertical-align:middle;color:#fff;position:relative;top:2px}.video-js.vjs-controls-disabled .vjs-control-bar,.vjs-control-text,.vjs-has-started .vjs-big-play-button,.vjs-hidden,.vjs-remaining-time{display:none}.video-js .vjs-big-play-button:before,.video-js .vjs-play-control:before{content:"\64"}.video-js .vjs-play-control.vjs-playing:before{content:"\6e"}.video-js .vjs-vol-0:before,.video-js .vjs-vol-1:before{content:"\61"}.video-js .vjs-vol-2:before{content:"\62"}.video-js .vjs-vol-3:before{content:"\63"}.video-js .vjs-fullscreen-control:before,.video-js .vjs-icon-fullscreen-enter:before{content:"\6c"}.video-js .vjs-icon-fullscreen-exit:before,.video-js.vjs-fullscreen .vjs-fullscreen-control:before{content:"\6d"}.video-js .vjs-big-play-button{position:absolute;top:50%;left:50%;opacity:.8;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.video-js .vjs-big-play-button:before{font-size:10em}.video-js .vjs-big-play-button:hover{opacity:1}.video-js .vjs-control-bar{background:#252428;padding:1em;display:flex;justify-content:flex-start;align-items:center;position:relative}.video-js .vjs-control{padding:0 1em}.vjs-volume-menu-button .vjs-menu-content{display:block;width:5em;height:2px}.vjs-volume-menu-button{display:flex;justify-content:flex-start;align-items:center}.video-js .vjs-slider{background:rgba(255,255,255,.2);width:100%;height:100%}.video-js .vjs-volume-level,.vjs-play-progress.vjs-slider-bar{background:#00cfe8;height:100%;position:relative;cursor:pointer}.video-js .vjs-volume-level:before,.vjs-play-progress.vjs-slider-bar:before{content:"";position:absolute;right:-8px;width:12px;height:12px;background:#00cfe8;top:-5px;border-radius:50%;box-shadow:0 0 2px 2px rgba(0,207,232,.35);z-index:10;-webkit-transform:scale(.8);transform:scale(.8);-webkit-transition:transform .3s;transition:transform .3s}.video-js .vjs-volume-level:hover:before,.vjs-play-progress.vjs-slider-bar:hover:before{-webkit-transform:scale(1);transform:scale(1)}.vjs-volume-menu-button .vjs-menu{padding:.85em 0 .85em 1em;margin:auto;height:30px}.video-js .vjs-control.vjs-time-control,.vjs-time-control.vjs-time-divider{font-weight:700;color:#fff}.video-js .vjs-progress-control{position:absolute;top:0;width:100%;height:2px;left:0;padding:0}.video-js .vjs-load-progress{background:rgba(255,255,255,.75);height:100%;position:absolute}.video-js .vjs-play-progress.vjs-slider-bar:before{display:none}.vjs-has-started .vjs-play-progress.vjs-slider-bar:before{display:block}.video-js.vjs-user-active .vjs-play-progress.vjs-slider-bar:before{-webkit-transform:scale(1);transform:scale(1)}.video-js.vjs-user-inactive .vjs-play-progress.vjs-slider-bar:before{-webkit-transform:scale(0);transform:scale(0)}.video-js .vjs-fullscreen-control{margin-left:auto}.video-js.vjs-fullscreen{width:100%!important;height:100%!important}.video-js.fluid .vjs-control-bar,.video-js.vjs-fullscreen .vjs-control-bar{position:absolute;bottom:0;transition:opacity .3s;width:100%}.video-js.fluid.vjs-user-active .vjs-control-bar,.video-js.vjs-fullscreen.vjs-user-active .vjs-control-bar{opacity:.9}.video-js.fluid.vjs-user-inactive .vjs-control-bar,.video-js.vjs-fullscreen.vjs-user-inactive .vjs-control-bar{opacity:0}@-webkit-keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;opacity:.85;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:60px;height:60px}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:block}.vjs-loading-spinner:after{content:'';border-radius:50%;animation:spinner .6s linear infinite;-webkit-animation:spinner .5s linear infinite;position:absolute;border-width:8px;border-style:solid;border-color:transparent #fff #fff transparent;width:100%;height:100%}@media only screen and (max-width:800px){.vjs-volume-menu-button .vjs-menu{display:none}.video-js .vjs-control{padding:0 .5em}.video-js .vjs-progress-control{padding:0}}@media only screen and (max-width:540px){.video-js .vjs-control-bar{padding:.5em 0}.video-js .vjs-big-play-button:before{font-size:5em}.video-js button:before,[class*=button]:before{font-size:25px}} /*]]>*/ </style>

1. الان ابحث على  وضع هذا فوقه

<script src="//vjs.zencdn.net/5.8.8/video.min.js"></script>

• الان احفظ القالب و في كل تدوينة تريد اضافة فيها فيديو تضع هذا الكود

<video class='video-js' data-setup='{"controls": true}' id='vid1' poster='https://1.bp.blogspot.com/-PZ_t7m-VS2k/U8F2v3iSlbI/AAAAAAAAEWs/cXjsm2e6WMs/s1600/3.jpg' preload='auto'><source src='https://www.gulf-up.com/04-2018/1524931369181.mp4' type='video/mp4'></source></video>

• مع تغيير الصورة المصغرة التي تنتهي ب jpg
• و تغيير رابط الفيديو طبعى

اذا اعجبتك اضافة اليوم لا تنسى الاشتراك في المدونة من هنا لكي تتوصل بكل ما هوا جديد في بلوجر

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/04/blog-post.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/04/blog-post.html">مشغل فيديوهات احترافي على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير</a>