الأربعاء، 9 مايو 2018

احصل على هذة الاداة من هنا

اضافة مشغل فيديو بخاصية التحميل



السلام عليكم ورحمة
الله وبركاته


 نعود لكم بتدوينة جديدة نقدم لكم فيها مشغل فيديو جد احترافي مع امكانية اضافة
اكثر من شريط واحد وزر التحميل دون الحاجة الى أي برامج
خارجية





طريقة التركيب:

    1. توجه الى التخطيط ثم اضف اداة html/javascript (بالسايد بار)
    2. ضع كود التالي داخل الاداة


      <style>
      video {
        box-shadow: 0 2.5em 2.5em -1.875em rgba(0, 0, 0, 0.5), 0 1.25em 5em 1em rgba(0, 0, 0, 0.2);
      padding: 0;
      margin: 0;
      width: 427px;
      height: 240px;
      background-color: black;
      margin: auto;
      display: block;
            margin-top: 5%;
          margin-bottom: 1%;
      }
      #buttons {
      text-align: center;
      }
      button{
      font-family: Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
      }
      .awesome{
      background: #222;/* url(/images/alert-overlay.png) repeat-x;*/
      display: inline-block;
      padding: 5px 10px 6px;
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      line-height: 1;
            border: 0;
      position: relative;
      cursor: pointer;
      }
      .awesome:hover {
      background-color: #111;
      color: #fff;
      }
      .large.awesome {
      font-size: 14px;
      padding: 8px 14px 9px;
      }
      .red.awesome {
      background-color: #e33100;
      }
      .blue.awesome {
      background-color: #2daebf;
      }
      .blue.awesome:hover {
      background-color: #007d9a;
      }
      .red.awesome:hover {
      background-color: #872300;
      }
      </style>
      <video id="video" controls="" preload="none" poster="https://media.w3.org/2010/05/sintel/poster.png">
            <source id="mp4" src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
             <p>Your user agent does not support the HTML5 Video element.</p>
       </source></video>
      <div id="buttons">
            <button class="large blue awesome" onclick="switchVideo(0);">Trailer 1</button>
            <button class="large blue awesome" onclick="switchVideo(1);">Trailer 2</button>
            <button class="large blue awesome" onclick="switchVideo(2);">Trailer 3</button>
            <button class="large blue awesome" onclick="switchVideo(3);">Trailer 4</button>
          </div>
      <script type="text/javascript">
      function init() {
          document._video = document.getElementById("video");
      }
      document.addEventListener("DOMContentLoaded", init, false);
      
      //switching videos (playlist)
      var videos = 
      [
       [
       "https://media.w3.org/2010/05/sintel/poster.png",
       "https://media.w3.org/2010/05/sintel/trailer.mp4",
       "https://media.w3.org/2010/05/sintel/trailer.webm"
       ],
       [
       "https://media.w3.org/2010/05/bunny/poster.png",
       "https://media.w3.org/2010/05/bunny/trailer.mp4"
       ],
       [
       "https://media.w3.org/2010/05/bunny/poster.png",
       "https://media.w3.org/2010/05/bunny/movie.mp4"
       ],
       [
       "https://media.w3.org/2010/05/video/poster.png",
       "https://media.w3.org/2010/05/video/movie_300.mp4",
       "https://media.w3.org/2010/05/video/movie_300.webm"
       ]
       ];
      function switchVideo(n) {
       if (n >= videos.length) n = 0;
      
       var mp4 = document.getElementById("mp4");
       var parent = mp4.parentNode;
      
       document._video.setAttribute("poster", videos[n][0]);
       mp4.setAttribute("src", videos[n][1]);
        document._video.load();
      }
      /*An example of all the options of the media API in HTML5
      More info here: https://www.w3.org/2010/05/video/mediaevents.html
      
      Buttons styled with RGBA, more info here:
      https://zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
      */
      </script>


        1. ثم قم بتغيير ما يلي                                                 
        2. xxxxxxx.png بصورة الفيديو
        3. xxxxxxx.mp4 برابط الفيديو


        1. اذا واجهت اي مشكلة ضعها بتعليق




      EmoticonEmoticon