Video Js动态加载源
Posted
技术标签:
【中文标题】Video Js动态加载源【英文标题】:Video Js loading source dynamically 【发布时间】:2016-05-11 03:43:56 【问题描述】:您好,我有一个应用程序,它有一个网格和一个 js 视频播放器。 目前我正在使用来自 SQL 数据库的数据填充网格,当单击一行时,我有一个函数调用,它调用存储过程并返回一个 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>");
任何帮助将不胜感激
【问题讨论】:
【参考方案1】:如果您使用的是 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'
);
【讨论】:
不幸的是,这并没有像我所说的那样起作用(我已经编辑了问题以包含它。) 关于代码将替换您当前在changesource(url)
中的代码。您最初将视频元素添加到 DOM 的方式没有任何区别。
嗨所以我将函数更改为函数 changesource(url) var video = videojs("#vid1");视频.src(url);但是我在视频播放器中得到的只是没有找到该视频的兼容源。但是当我直接将链接放入时它可以工作。我还检查了它是否获得了正确的来源。
添加新源时是否需要刷新播放器?
videojs("vid1");
中没有#。您无需重新创建播放器即可更改源。 videojs('player-id') 从具有 id 'player' 的视频元素创建一个 video.js 播放器并返回它,或者如果播放器已经存在,则只返回它。【参考方案2】:
如果您使用带有视频 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"
controls
autoPlay=true
preload="auto"
poster=state.video.thumb
data-setup=""
ref=videoRef
>
<source src=a type="video/mp4"></source>
</video>
</>
【讨论】:
以上是关于Video Js动态加载源的主要内容,如果未能解决你的问题,请参考以下文章