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

السلام عليكم ورحمة

الله وبركاته

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

اكثر من شريط واحد وزر التحميل دون الحاجة الى أي برامج

خارجية

• معاينة

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

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. اذا واجهت اي مشكلة ضعها بتعليق