Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Is it possible to change the src? #339

Closed
lingtalfi opened this issue Dec 7, 2015 · 6 comments
Closed

Is it possible to change the src? #339

lingtalfi opened this issue Dec 7, 2015 · 6 comments

Comments

@lingtalfi
Copy link

Hi, I'm interested in manually triggering the playing of different youtube urls using the same html video tag (if possible).
I saw this code which gives me hope that this is feasible: http://jsfiddle.net/mister_ben/g7mrs/
But this is old code (videojs version 4.1 and an older version of the videojs-youtube plugin),
and upgrading to the current versions just doesn't do the trick.
Is there an easy work around?

Actually, digging in the closed issues, I found this issue:
#241
which is the same as mine.

I'm using this code on firefox with mac 10.11.1:

<!DOCTYPE html>
<html>
<head>

    <link href="http://vjs.zencdn.net/5.3.0/video-js.css" rel="stylesheet">

    <!-- If you'd like to support IE8 -->
    <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>


    <!-- ad markers plugin, depends from jquery -->
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>


    <script src="/js/vjs-5.3.0/video.js"></script>
    <script src="/js/vjs-5.3.0/plugins/youtube/Youtube.js"></script>

</head>

<body>

<video
    id="my-video"
    class="video-js vjs-default-skin"
    controls
    width="640" height="264"
    >
</video>

<button id="playnext">play next</button>


<script>
    (function ($) {
        $(document).ready(function () {

            var player = videojs('my-video', {
                controls: true,
                sources: [{src: 'https://www.youtube.com/watch?v=cKsvKXtWnVE', type: 'video/youtube'}],
                techOrder: ['youtube', 'html5']
            });


            $('#playnext').on('click', function () {

                var sources = [{"type": "video/youtube", "src": "https://www.youtube.com/watch?v=s9MszVE7aR4"}];
                player.pause();
                player.src(sources);
                player.load();
                player.play();

            });


        });
    })(jQuery);
</script>


</body>
</html>

and my error message (in firebug) is:
TypeError: this[method] is not a function (from video.js line 10195, col9)
@eXon eXon closed this as completed in 637a291 Dec 14, 2015
@eXon
Copy link
Collaborator

eXon commented Dec 14, 2015

I added an example in example/youtube-javascript.html. You should be able to change the source with javascript now.

@lingtalfi
Copy link
Author

Kool. Thanks.
Just adding another example for googlers (just in case):

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>
</head>
<body>
<video
    id="vid1"
    class="video-js vjs-default-skin"
    controls
    width="640" height="264"
    data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
    >
</video>


<button id="change">change video</button>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>
<script
    src="https://raw.githubusercontent.com/eXon/videojs-youtube/637a2916c2c4fd2b5fc55dafa3df923a92fec6d0/src/Youtube.js"></script>
<script>

    (function ($) {
        $(document).ready(function () {

            // An example of playing with the Video.js javascript API
            // Will start the video and then switch the source 3 seconds latter
            // You can look at the doc there: http://docs.videojs.com/docs/guides/api.html
            videojs('vid1').ready(function () {
                var myPlayer = this;
                myPlayer.src({type: 'video/youtube', src: 'https://www.youtube.com/watch?v=y6Sxv-sUYtM'});

                $("#change").on('click', function () {
                    myPlayer.src({type: 'video/youtube', src: 'https://www.youtube.com/watch?v=09R8_2nJtjg'});
                });
            });

        });
    })(jQuery);
</script>
</body>
</html>

@eXon
Copy link
Collaborator

eXon commented Dec 15, 2015

Awesome thank you :)

@rob-gordon
Copy link

Thanks for this! It's strange that the html5 video js api can't accept multiple sources, the way the html element can. I ended using Modernizer re http://stackoverflow.com/a/5371478. Just putting this here for anyone else landing on this thread.

@ownmaster
Copy link

Just an information: in IE11 (mode IE10) direct usage of src() when <src> is already set, generated errors, so I had to call reset() first.

@ownmaster ownmaster mentioned this issue Feb 14, 2017
Closed
@CraftInsights
Copy link

Kool. Thanks.
Just adding another example for googlers (just in case):

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>
</head>
<body>
<video
    id="vid1"
    class="video-js vjs-default-skin"
    controls
    width="640" height="264"
    data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
    >
</video>


<button id="change">change video</button>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>
<script
    src="https://raw.githubusercontent.com/eXon/videojs-youtube/637a2916c2c4fd2b5fc55dafa3df923a92fec6d0/src/Youtube.js"></script>
<script>

    (function ($) {
        $(document).ready(function () {

            // An example of playing with the Video.js javascript API
            // Will start the video and then switch the source 3 seconds latter
            // You can look at the doc there: http://docs.videojs.com/docs/guides/api.html
            videojs('vid1').ready(function () {
                var myPlayer = this;
                myPlayer.src({type: 'video/youtube', src: 'https://www.youtube.com/watch?v=y6Sxv-sUYtM'});

                $("#change").on('click', function () {
                    myPlayer.src({type: 'video/youtube', src: 'https://www.youtube.com/watch?v=09R8_2nJtjg'});
                });
            });

        });
    })(jQuery);
</script>
</body>
</html>

I don't know what I'm doing wrong, I followed the code example but when I click on the change button, nothing happens.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@rob-gordon @lingtalfi @eXon @ownmaster @CraftInsights