videojs，手动触发不同的youtube url

Question

我有兴趣手动（点击一个按钮）触发不同的 YouTube 网址的播放，使用相同的 html 视频标签（如果可能的话）和 videojs。

我看到这段代码让我希望这是可行的：http://jsfiddle.net/mister_ben/g7mrs/

html代码：

<video id="myPlayer" src="" class="video-js vjs-default-skin" controls preload="auto" width="320" height="180" data-setup='{ "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v=D36JUfE1oYk" }'></video>
<p><a href="#" onClick="loadVideo()">Another video</a></p>

js代码：

function loadVideo(event) {
    videojs("myPlayer").src({ type: "video/youtube", src: "http://www.youtube.com/watch?v=dQw4w9WgXcQ"});
    event.preventDefault();                  
}

但这是旧代码（videojs 版本 4.1 和 videojs-youtube 插件的旧版本），升级到当前版本并不能解决问题。

我正在为 videojs 使用 youtube 插件 (https://github.com/eXon/videojs-youtube)。

现在使用新的 API 甚至可以做到这一点吗？

Answer 1

我问了作者，他在这里举了一个例子： https://github.com/eXon/videojs-youtube/issues/339#issuecomment-164592838

这是一个工作示例：

<!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>

Answer 2

使用 Videojs 播放器在 ionic 中播放不同的 youtube url。

下面是它的工作示例：

page.html

    <video id='video' width="100%" controls preload="auto" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"></video>


page.ts

this.videoJSplayer = videojs(document.getElementById('video'), {
  controls: true,
  autoplay: true,
  techOrder: ["youtube"],
  height: "200"
 });

 this.videoJSplayer.src({type:'video/youtube',src:"https://www.youtube.com/watch?v=Xwo-H5krlj0"})

videojs，手动触发不同的youtube url

videojs, trigger different youtube urls, manually

youtube

video.js