Webplayer modifiable with JS

Asked

Viewed 47 times

1

I’m creating a "Webplayer" page and I need two things on it:

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

This is my current HTML/JS... [I haven’t worked on anything from the first function yet... because I need to make sure the second one works well]

<html>
<div id="lista">
<embed src="https://six-ratings.000webhostapp.com/FO.htm"></embed>
</div>
<div id="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>
var x.document.getElementById("video");
var tag= x.document.querySelector("video source").src;
   location.href=tag;
   window.locationf=tag;
</script>
</html>

javascript html5

  • I’ll see the same and report what I find...

1 answer

1


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

Source

$(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>
<video id="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>

  • It worked... Thanks man...

  • Amigo... You can fix the list inside something that limits the space of it... Like we do with a <embed>... Because it is going up to the horizon and it is difficult to go down there click on the link and then back to see the video... [This is the link of my page ( https://six-ratings.000webhostapp.com/WebApp/APP.html )]

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.