这个有可能?
我正在处理视频流。有人在表单上输入时可以添加新源吗?发送到视频源?
<!-- 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”
谢谢!
通过表单发送 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>
请注意,在输入字段中写入带有扩展名的视频名称
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句