0

Hi, I am having trouble getting a video player to work using Javascript. I copied this from a page a developer at my company did, but he is away right now so I can't ask him for help. Here is the HTML:

<div class="feature" style="width:485px; height:273px">
                        <div class="video-placeholder">
                            <img src="../../assets/images/figures/tro-video-placeholder.jpg" alt="Dr. Niva Tro" />
                            <span>Play video</span>
                        </div>
            </div>   

                <ol class="video-questions">
                    <li><a href="https://www.youtube.com/watch?v=HKD-mfcphig?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Cover</a></li>
                    <li><a href="http://www.youtube.com/watch?v=kILqK_FH64w?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Self-Assessment Quizzes</a></li>
                    <li><a href="http://www.youtube.com/watch?v=rB7lk8pstM4?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Relevancy</a></li>
                    <li><a href="http://www.youtube.com/watch?v=Dxrfd4mujis?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Problems on Data Interpretation and New Section on Mass Spectra</a></li>
                    <li><a href="http://www.youtube.com/watch?v=ABbwO1kTJlU?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Nomenclature Flow Chart</a></li>
                    <li><a href="http://www.youtube.com/watch?v=6JRcwBNfmoA?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Balancing Chemical Equations with Polyatomic Ions</a></li>
                    <li><a href="http://www.youtube.com/watch?v=vQ5vMQRL8Yc?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Updates to Chapter 7: The Quantum-Mechanical Model of the Atom</a></li>
                    <li><a href="http://www.youtube.com/watch?v=3R-ZPMBuCOU?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Drawing Resonance Structures</a></li>
                    <li><a href="http://www.youtube.com/watch?v=ukGrGCQB_64?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Changes to Representations of Bonds</a></li>
                    <li><a href="http://www.youtube.com/watch?v=M_El47RSUN8?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Electrostatic Potential Maps</a></li>
                </ol>

And the Javascript:

function init_video_QA(){

    //  does element exist?
        if(!$('.video-questions')){

        //  no? stop
            return;
        }

    //  yes? continue.
        else{

            var $list = $('.video-questions'),
                $link = $list.find('a'),
                $videoPlaceholder = $('.video-placeholder');

                //  1.  Remove any currently flagged link
                $link.each(function(){

                //  bind click and keypress events
                    $(this)
                        .bind('click keypress', function(event){

                        var $this = $(this),
                            $href = $this.attr('href'),
                            $videoID = $(this).attr('href').substr($href.indexOf("=") + 1),
                            $clipDuration = $(this).attr('data-video-duration') * 1000,
                            $imgSrc = $videoPlaceholder.find('img').attr('src');

                        if($this.hasClass('active')){
                            event.preventDefault();
                        }

                        else{

                            $('.active')
                                .removeClass('active');

                            $this
                                .addClass('active');

                            //  set a timeout for the length of the clip that
                            //  replaces the still; we're using a custom data
                            //  attribute to tag the link with in the markup;
                            //  formula:
                            //  clipDuration = data-video-duration (time in seconds) X 1000
                                //setTimeout(function(){

                                    //  find the currnetly visible player container and
                                    //  replace its source with the previously displayed
                                    //  video still img
                                        //$videoPlaceholder
                                            //.html('<img src="' + $imgSrc + '" alt="" />');

                                    //}, $clipDuration);

                        //  swap content for actual embedded video
                            $videoPlaceholder
                                //.css('display', 'block')
                                .html('<iframe style="display:block;" width="485" height="273" src="https://www.youtube.com/embed/' + $videoID + '?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1&amp;wmode=opaque" frameborder="0" allowfullscreen="allowfullscreen" title="Video"></iframe>');
                        }

                        event.preventDefault();
                    });

                    $videoPlaceholder
                        .bind('click keypress', function(){
                            $('.video-questions')
                                .find('a:first')
                                    .trigger('click');
                        });
                });

        }
    }

This is driving me crazy- I can't figure out what I'm doing wrong. Any help is appreciated. Thank you!

2
Contributors
3
Replies
4
Views
4 Years
Discussion Span
Last Post by Taywin
0

Could you please tell us what is wrong with it? You just said not working and that means million of things.

1)Did you include jquery library file to your page? Because the script is using jquery.
2)What did you change in the script?
...

Edited by Taywin

0

What browser did you use? If you have Firefox, install add-in called "fire bug" to your browser. Turn it on when you are on your page. If there is any error in JavaScript, it will have a number on its icon. Click on it and go to Console, you will see where exactly the error line of code and why.

I don't use JQuery myself. Anyway, what do you think you would get from the below script line?

// if the link is this
<a href="https://www.youtube.com/watch?v=HKD-mfcphig?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white" title="Play video">Cover</a>

$videoID = $(this).attr('href').substr($href.indexOf("=") + 1)

//What I think is that you will get...
//""https://www.youtube.com/watch?v=HKD-mfcphig?HD=1&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;theme=light&amp;color=white""
//The reson is that you start it from "=" and that includes all the double quotes
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.