我已经两次阅读了该文档,但还没有找到这样做的方法。 videojs
本身就无法做到这一点,这在文档中提到了,所以我有hls
插件应该能够做到这一点,但是我找不到与此相关的任何内容。
有人可以将我指向正确的方向吗?
这是用视频更改源视频轨迹的示例:
/* video player setup */
vPlayer = videojs('my_video', {
techOrder: ["html5", "youtube"],
autoplay: false,
sources: [{
type: "video/mp4",
src: "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
}]
});
vPlayer.on('playing', function(e) {
$("#info").html("playing...<br>url: " + vPlayer.currentSrc() + "<br>type:" + vPlayer.currentType());
});
/* available videos */
var vids = [{
type: "video/mp4",
src: "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
},
{
type: "video/mp4",
src: "https://vjs.zencdn.net/v/oceans.mp4"
},
{
type: "video/youtube",
src: "https://www.youtube.com/watch?v=kkGeOWYOFoA"
}
];
playVideo = function(n) {
vPlayer.src(vids[n]);
vPlayer.play();
}
<link href="https://vjs.zencdn.net/6.7/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/6.7/video.js"></script>
<script src="https://cdn.rawgit.com/videojs/videojs-youtube/c4be481f/dist/Youtube.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="my_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="400">
</video>
<hr>
<button onclick="playVideo(0)">play 0 (mp4)</button>
<button onclick="playVideo(1)">play 1 (mp4)</button>
<button onclick="playVideo(2)">play 2 (youtube)</button>
<hr>
<div id="info"></div>
这也是一个JSFIDDLE:https://jsfiddle.net/beaver71/w7yah2vo/