0

you-tube 埋め込みビデオをサポートするビデオ プレイリストを作成する方法は?

ページを更新したくありません。ユーザーが別のビデオをクリックすると、ビデオが動的に変化するだけです。参照用にこれを見てください。

jplayer/video-js/flowplayer などのいずれかがこの機能をサポートしていますか?

4

3 に答える 3

0

YouTube src を動的に変更するには、次の例を試してください。

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

または、こちらのディスカッションを参照してください: https://github.com/eXon/videojs-youtube/issues/339#issuecomment-164592838

于 2015-12-15T04:47:49.183 に答える
0

これはJSのトリックです。ブラウザー (または firebug) へのコンソールがある場合は、JSON の get 要求と応答がブラウザーからサーバーに送られ、その逆になっていることがわかります。サーバーはデータベースから正しい埋め込みビデオを読み取り、ブラウザに送信し、それをページ DOM に挿入します。

于 2013-09-04T12:28:56.387 に答える