视频Js动态加载源
Video Js loading source dynamically
您好,我有一个应用程序,它有一个网格和一个 js 视频播放器。
目前我正在用 SQL 数据库中的数据填充网格,每当单击一行时我都会调用一个函数调用它调用一个存储过程和 returns url 然后我使用那个 url改源改源。有趣的是,对于基本的 html 5 视频播放器,我的代码工作正常但不适用于 Video JS
我的代码 -
function changesource(url) {
var video = $("#vid1");
video.src = url;
document.getElementById('vid1').src = url;
}
// calls the function for browse
function getBrowseData() {
$.ajax({
type: "post",
data: JSON.stringify({
archive_header_Key: testdata,
}),
url: "/Search.aspx/GetBrowseData",
dataType: "json",
contentType: "application/json",
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
var obj = (object.d[0]["browse_file"]);
var slashReplace = obj.replace(/\/g, "/");
var slashFinal = slashReplace.substring(10);
var browsevalue = GetValue("BrowseServer");
var slashfinal = "http://" + browsevalue + ":5060" + slashFinal;
Location = slashfinal;
$('#p1').text(slashfinal);
changesource(slashfinal);
}
}
var Video = ("<video id='vid1' class='video-js vjs-default-skin' controls preload='none' width='640' height='264' data-setup='{}'><source src=" + Location + " type='video/mp4'/></video> <script>var options = { hidden: false }, mplayer = videojs('vid1'); mplayer.rangeslider(options); mplayer.showSlider();</script>");
任何帮助将不胜感激
如果您使用 video.js,则需要使用它的 API 来设置来源。 HTML5 视频 API 不起作用,因为一旦初始化 video.js 播放器,id 为 vid
的元素就不是视频元素。
var video = videojs("vid1");
video.src(url);
Video.js 会推断一些文件扩展名的视频类型,但最好包括 type:
video.src({
type: 'video/mp4',
src: 'https://example.com/myvideo.mp4'
});
如果您使用带有视频 js 的 React 功能组件,
那么你必须使用 useRef Hook 访问视频标签,
像这样
{
import {useRef} from 'react';
const videoRef=useRef();
useEffect(()=>{
videoRef.current.src=DYNAMIC_DATA_URL
})
return <>
<video
id={state.video.id}
className="video-js vjs-big-play-centered"
width="800"
height="482"
controls
autoPlay={true}
preload="auto"
poster={state.video.thumb}
data-setup="{}"
ref={videoRef}
>
<source src={a} type="video/mp4"></source>
</video>
</>
}
您好,我有一个应用程序,它有一个网格和一个 js 视频播放器。 目前我正在用 SQL 数据库中的数据填充网格,每当单击一行时我都会调用一个函数调用它调用一个存储过程和 returns url 然后我使用那个 url改源改源。有趣的是,对于基本的 html 5 视频播放器,我的代码工作正常但不适用于 Video JS
我的代码 -
function changesource(url) {
var video = $("#vid1");
video.src = url;
document.getElementById('vid1').src = url;
}
// calls the function for browse
function getBrowseData() {
$.ajax({
type: "post",
data: JSON.stringify({
archive_header_Key: testdata,
}),
url: "/Search.aspx/GetBrowseData",
dataType: "json",
contentType: "application/json",
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
var obj = (object.d[0]["browse_file"]);
var slashReplace = obj.replace(/\/g, "/");
var slashFinal = slashReplace.substring(10);
var browsevalue = GetValue("BrowseServer");
var slashfinal = "http://" + browsevalue + ":5060" + slashFinal;
Location = slashfinal;
$('#p1').text(slashfinal);
changesource(slashfinal);
}
}
var Video = ("<video id='vid1' class='video-js vjs-default-skin' controls preload='none' width='640' height='264' data-setup='{}'><source src=" + Location + " type='video/mp4'/></video> <script>var options = { hidden: false }, mplayer = videojs('vid1'); mplayer.rangeslider(options); mplayer.showSlider();</script>");
任何帮助将不胜感激
如果您使用 video.js,则需要使用它的 API 来设置来源。 HTML5 视频 API 不起作用,因为一旦初始化 video.js 播放器,id 为 vid
的元素就不是视频元素。
var video = videojs("vid1");
video.src(url);
Video.js 会推断一些文件扩展名的视频类型,但最好包括 type:
video.src({
type: 'video/mp4',
src: 'https://example.com/myvideo.mp4'
});
如果您使用带有视频 js 的 React 功能组件, 那么你必须使用 useRef Hook 访问视频标签, 像这样
{
import {useRef} from 'react';
const videoRef=useRef();
useEffect(()=>{
videoRef.current.src=DYNAMIC_DATA_URL
})
return <>
<video
id={state.video.id}
className="video-js vjs-big-play-centered"
width="800"
height="482"
controls
autoPlay={true}
preload="auto"
poster={state.video.thumb}
data-setup="{}"
ref={videoRef}
>
<source src={a} type="video/mp4"></source>
</video>
</>
}