jquery - video.js 使用数据库中的 json 创建动态播放列表
问题描述
我有一些代码将使用该video.js
库显示一个 html5 播放器。我想通过使用我的数据库中的 json 输出来动态创建一个播放列表,所以,为了完成这个任务,我安装了videojs-playlist
插件。
我正在尝试使用$.each()
函数生成播放列表,但没有成功。如何处理 json 为播放器创建播放列表?另一个问题是关于播放器的高度和宽度。如何将其设置为窗口的 100% 宽度和高度?
这是我正在使用的代码:
<video id='sc-player' class='video-js' controls preload='auto' autoplay width='1280' height='600' data-setup=''>
</video>
<script>
$(document).ready(function(){
const player = videojs('sc-player');
$.ajax({
type: 'GET',
url: 'streamController.php?playlist',
cache: false,
success: function(response){
var vid = JSON.parse(response);
player.src(vid[0].url);
$.each(vid, function(i){
player.playlist([{
sources: [{
src: [i].url,
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/sintel/poster.png'
}]);
player.playlist.autoadvance(0);
});
}
});
});
</script>
解决方案
在 SO 上搜索后,我找到了解决方案:
<video id='c-player' width='1280' height='619' class='video-js' controls autoplay prelaod ></video>
<script>
$(document).ready(function(){
const player = videojs('c-player');
var videosrc = [];
$.ajax({
type: 'GET',
url: 'streamController.php?playlist',
cache: false,
success: function(response){
var vid = JSON.parse(response);
player.src(vid[0].url);
for(var i = 0; i < vid.length; i++){
var vidsUrl = vid[i].video_url;
var posterUrl = vid[i].poster_url;
videosrc.push({sources: [{src: vidsUrl, type: 'video/mp4'}],poster: posterUrl});
//videosrc.push({sources: [{src: vidsUrl, type: 'video/mp4'}]});
}
player.playlist(videosrc);
player.playlist.autoadvance(0);
player.playlist.repeat(true);
}
});
});
</script>
推荐阅读
- mysql - 在mysql上创建函数
- snowflake-cloud-data-platform - SQL 编译错误:位置 11 处的错误行 2 字符长度无效:2,097,088,000。在雪花中必须介于 1 和 16,777,216 之间
- python - 解码的 CSV 文件出错:InvalidArgumentError:未引用的字段内部不能有引号/CRLF
- supercollider - 如何在扬声器上或保存到输出文件中从终端命令行界面 (CLI) 以非交互方式播放 SuperCollider 文件?
- python - SQL/Python - 递归加入 id 列
- javascript - Vue 和 Vuetify 分离 js html 和 css
- python - Gtk 对话框只出现一次
- javascript - 如何让用户存储库使用 extends 属性?
- python - 如何提取numpy数组的非零值
- kubernetes - 发生内部错误:调用 webhook “validate.nginx.ingress.kubernetes.io”失败