WebPlayer modifiable with JS

1

I'm creating a "WebPlayer" page and I need two things in it:

  • 1: A list with the EPS that when clicking change the link inside the embed "video"
  • 2: Function to manipulate the embed "video" and redirect the link of it from a JS ...

This is my current HTML / JS ... [I have not worked anything from the first function yet ... Well I need to make sure the second one works fine]

<html>
<div id="lista">
<embed src="https://six-ratings.000webhostapp.com/FO.htm"></embed></div><divid="video">
<embed src="http://showpl.tk/c5283"></embed></div><style>#lista{position:relative;display:-webkit-box;height:25%;}#video{position:relative;top:-160px;left:30%;display:-webkit-box;}</style><script>varx.document.getElementById("video");
var tag= x.document.querySelector("video source").src;
   location.href=tag;
   window.locationf=tag;
</script>
</html>
    
asked by anonymous 07.11.2017 / 18:06

1 answer

1

You use attr of jQuery to create your playlists, for example:

Font

$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        })
    })
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})
#playlist {
    display:table;
}
#playlist li{
    cursor:pointer;
    padding:8px;
}

#playlist li:hover{
    color:blue;                        
}
#videoarea {
    float:left;
    width:640px;
    height:480px;
    margin:10px;    
    border:1px solid silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><videoid="videoarea" controls="controls" poster="" src=""></video>

<ul id="playlist">
    <li movieurl="http://html5videoformatconverter.com/data/images/happyfit2.mp4" moviesposter="http://html5videoformatconverter.com/data/images/screen.jpg">Happy Fit</li>
    <li movieurl="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</li>          
    <li movieurl="http://html5example.net/static/video/html5_Video_VP8.webm">Resident Evil</li>      
    <li movieurl="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</li>
</ul>
    
07.11.2017 / 20:10