مشغل فيديوهات احترافي على مدونات بلوجر

مشغل فيديوهات احترافي على مدونات بلوجر

الكاتب : bisan التاريخ : الثلاثاء، 3 يوليو 2018 التعليقات : 1

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

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

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

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

<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. الان ابحث على </body> وضع هذا فوقه

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

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

<video class='video-js' data-setup='{"controls": true}' id='vid1' poster='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGSLApnbkBDuho2CKRLOazfSbJ0ScfPZVpYt3UI2kXO5jFl_QK9STlDFiNEuqeACRpjWDSNm9O8NGaYXlklAemgmPMweq9LMaaUMPq8WB8ksNSFShFUhzxHc3f4IhWd5Qa41GCECXvCY/s1600/3.jpg' preload='auto'> <source src='https://www.gulf-up.com/04-2018/1524931369181.mp4' type='video/mp4'></source> </video>

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

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

فيسبوك توتير جوجل + لينكدان بينتريست

مصرى الجنسية من مدينة الالف مأذنة عمرى 28 عام محب للتدوين مهتم جدا بمجال التكنولوجيا والمعلوميات هدفى هو الارتقاء بالمحتوى العربى ومؤسس مدونة رؤيا للمعلوميات .

الكاتب : bisan

مواضيع مهمة أيضا