如何建立具有youtube视频的视频播放列表
how to build video playlist having youtube videos?
如何构建一个支持嵌入式视频的视频播放列表?
我不想刷新页面,只是如果用户点击另一个视频,视频会动态变化,看看这个供您参考。
jplayer/videojs/flowplayer等是否支持此功能?
如果您使用的是video.js和YouTube插件,您可以使用video.js API更新源代码。您确实需要指定video/youtube
类型。
videojs("myPlayer").src({ type: "video/youtube", src: "http://www.youtube.com/watch?v=dQw4w9WgXcQ"});
示例:http://jsfiddle.net/mister_ben/g7mrs/
这是一个JS技巧。如果你有一个浏览器控制台(或firebug),你可以看到,它会从浏览器向服务器发送JSON获取请求和响应,然后反过来。服务器从数据库中读出正确的嵌入视频,将其发送到浏览器,并将其插入到页面DOM中。
尝试此示例动态更改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
相关文章:
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 如何用低音量自动启动Youtube视频(iframe)
- 使用HTML5播放器时使用Javascript更改Youtube视频
- 有没有办法在dailymotion播放器的新测试版中播放youtube视频
- 在Android Kitkat上模拟鼠标点击Youtube视频
- 我们如何在dailymotion播放器的新测试版中播放youtube视频
- Lightbox关闭时停止播放Youtube视频
- 放大弹出生成“;找不到文件”;YouTube视频的错误
- 如何获取youtube视频的缩略图
- 从我的频道中提取最后3个youtube视频
- 你如何在youtube.com上获得youtube视频的状态
- 尝试制作youtube视频的缩略图,并在单击时将其放大
- 如何在Android WebView中嵌入Youtube视频
- jQuery:在for循环中运行youtube视频,播放最后一个视频
- 如何使用javascript在嵌入式youtube视频上创建可点击的时间戳链接
- 如何使用javascript(或jQuery)将youtube视频添加到iframe(基于web的RTE)
- 滚动时播放youtube视频
- youtube视频的正则表达式匹配模式可以以非贪婪的方式完成吗
- 允许我在用户操作后隐藏YouTube视频吗
- 改变嵌入式YouTube视频的方面配比