时间戳

首页 > 解决方案 > 可以为视频添加新来源吗？

javascript - 可以为视频添加新来源吗？

问题描述

这个有可能？

我正在处理视频流。当有人在表单上输入时，可以添加新的源吗？发送到视频源？

<!-- CSS  -->
 <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet"></link>


<!-- HTML -->
<video class="video-js vjs-default-skin" controls="" height="400" id="hls-example" width="700" preload="none">
<source src="CHANGE IF SOMEONE INPUT IN URL FORM" type="application/x-mpegURL"></source>
</video>


<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

<script>
var player = videojs('hls-example');
player.play();
</script>

我不擅长js。有人能帮我吗？当用户尝试将某些内容放入“url form”时，页面将刷新并保存新的“URL”

谢谢！

标签： javascripthtmlvideo

解决方案

通过表单发送 GET 参数：

<input name="vname">

您可以像这样获取 GET 请求参数：

var vname = new URL(window.location.href).searchParams.get('vname');

并附加到源 src：

document.querySelector("source").src = vname;

并localStorage用于存储文件名：

<!-- CSS  -->
 <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet"></link>


<!-- HTML -->
<form>
<input name='vname' placeholder="Enter filename">
<input type='submit'>
</form>
<video class="video-js vjs-default-skin" controls="" height="400" id="hls-example" width="700" preload="none">
<source src="" type="application/x-mpegURL"></source>
</video>


<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

<script>
var vname = new URL(window.location.href).searchParams.get('vname');
if(vname != null){localStorage.setItem("vname",vname);}
document.querySelector("video source").src = localStorage.getItem("vname") == "" ? vname : localStorage.getItem("vname");
var player = videojs('hls-example');
player.play();
//alert(document.querySelector("video source").src);
</script>

请注意，在输入字段中写入带有扩展名的视频名称

推荐阅读