0

I need to play a movie in another page (page2.html) by clicking on a button in page1.html.

On a main page I have multiple buttons which runs movies on separate pages. I need to connect those buttons with the appropriate movie ID.

Could you give me some advice on how to do that?

JS

var myVideo = document.getElementById("video1"); 

function playPause() { 
    if (myVideo.paused) {
        myVideo.play(); 
    } else {
        myVideo.pause();
    }
}

page1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Eagle+Lake" rel="stylesheet">
  <link rel="Stylesheet" type="text/css" href="view.css" />
  <script type="text/javascript" scr="video_play.js"></script>
</head>
<body>
  <center>
    <button onclick="playPause()">Play/Pause</button>
  </center>
</body>
</html>

page2.html

<!DOCTYPE html> 
<html> 
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Eagle+Lake" rel="stylesheet">
  <link rel="Stylesheet" type="text/css" href="view.css" />
  <script type="text/javascript" scr="video_play.js"></script>
</head>
<body> 

  <div style="text-align:center"> 
    <br><br>
    <video id="video1" width="420">
    <source src="/Applications/XAMPP/xamppfiles/htdocs/filmy/xxx.mp4" type="video/mp4">
    </video>
  </div> 
</body> 
</html>

CSS

body {
    font-family: 'Eagle Lake', cursive;
}

input {
    width: 40px;
    text-align: center;
}

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background-size: cover;
}
Garrett Kadillak
  • 952
  • 8
  • 18
piotrsewerynek
  • 21
  • 5
  • How is your two pages communicating with each other? Did one window open the other? – Blue May 21 '17 at 14:16
  • Are you using a framework to render the pages? – Garrett Kadillak May 21 '17 at 14:22
  • @FrankerZ they don't communicate yet. page2.html will be open on RPi in another room, from page1.html i want to control movie on page2. RPi will be set in kiosk mode so on screen will be only page2 without cursor and so on. – piotrsewerynek May 21 '17 at 14:31
  • 1
    You're going to need to use some type of websocket framework, and communicate from client => server => client again. My suggestion if you're using raspberry pi, check out SignalR c# – Blue May 21 '17 at 14:38
  • @FrankerZ great, i'll check this. Thank you – piotrsewerynek May 21 '17 at 14:41
  • @piotrsewerynek I think it would be best if you use [Window.postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) in _page1.html_ and `receiveMessage` in _page2.html_. – Ahs N May 21 '17 at 14:47

0 Answers0