Как вставить плеер через 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></iframe>
Переменные плеера (file, poster и т.д.) можно передавать в строке запроса iframe.

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




2019 © PlayerJS

Вход

Восстановить пароль
Создать аккаунт
Войти

Регистрация

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

Enterprise

Ваше имя
Сайт
Email
Телефон
Комментарий
Отправить запрос

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

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