Как вставить плеер через iframe


Можно вставить плеер на свой сайт через iframe (так раздают плеер все видеохостинги).

iframe — это элемент верстки сайта, в котором загружается html страница. На этой странице и размещен плеер.

Пример такой страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <title></title> 
      <script src='playerjs.js' type='text/javascript'></script>
   </head>
   <body>
   <style>
      html,body{
         margin:0;padding:0;width:100%;height:100%;
      }
   </style>
        
   <div id="playerjs" style="width:100%;height:100%;"></div>
        
   <script type="text/javascript">
      var ps = location.href.substr(location.href.indexOf("html?")+5).split("&");
      var vs = {id:"playerjs"};  
      for(var i = 0; i<ps.length; i++){
         var p = ps[i].substr(0,ps[i].indexOf("="));
         var v = ps[i].substr(ps[i].indexOf("=")+1);
         if(p!=v){
            vs[p] = decodeURIComponent(v);
         }
      }
      if(vs.file){
         var playerjs = new Playerjs(vs);
      }
   </script>
</body>
</html>
Например, вы сохранили этот код в файл player.html и положили в папку player. В этой же папке должен лежать файл плеера playerjs.js

Код iframe, который вы вставите на сайт будет следующий:

<iframe src="//site.com/player/player.html?file=ссылка_на_видео&poster=ссылка_на_постер&title=Название" type="text/html" width=100% height=100% frameborder="0" allowfullscreen allow="autoplay; fullscreen; picture-in-picture;"></iframe>
Переменные плеера (file, poster и т.д.) можно передавать в строке запроса iframe.

Скачайте пример (распакуйте архив в папку, скопируйте в нее плеер (playerjs.js) и запустите файл test.html). Пошаговая инструкция для интеграции плеера с помощью iframe.


19.12.11
2024 © PlayerJS

Регистрация

Создать аккаунт
Регистрируясь, вы принимаете Пользовательское соглашение
Войдите, если уже есть аккаунт

Восстановить пароль

Восстановить
Если вы забыли свой email, напишите нам