Question

HY！
我正在制作一个视频播放器，我想为播放器预览一个secticon 看起来像这样：

<input type="url" ontype="" id="videourl" placeholder="Give the mp4 URL here">
<input type="url" ontype="" id="video poster" placeholder="Give here the video poster" >

这是基于video.js的视频播放器。

你看到＆＃34; ontype＆＃34;节。
这里有功能，可以向用户显示播放器如果您输入正确的数据，播放器工作，您将获得视频海报和视频（当然，您可以播放）。

玩家结构：

<video id="vid3" controls preload="none" poster="Here come the input value" class="video-js vjs-default-skin" data-setup='{ "techOrder": ["flash"] }'>
    <source src="Here come the input value" id="iframe_field" type='video/mp4'>
</video>

Answer 1

尝试使用此HTML代码：

<form action="javascript:loadVideo()">
    <input type="url" id="source" />
    <input type="url" id="poster" />
    <button>Submit</button>
</form>
<video id="vid3" controls src=""></video>

使用以下JavaScript代码：

function loadVideo() {
    var vid = document.getElementById('vid3');
    vid.src = document.getElementById('source').value;
    vid.poster = document.getElementById('poster').value;
}

尝试this demo，其中已填写输入视频网址，该视频网址取自w3.org。

当用户按Enter键时，会将视频加载到<video>元素中，或者点击按钮进行提交。

Answer 2

试试这个HTML：

<input type="url" id="videourl" placeholder="Give the mp4 URL here" value="">
<input type="url" id="videoposter" placeholder="Give here the video poster" value="">
<button onclick="reload();">Load Video</button>

<video id="vid3" controls preload="none" poster="" class="video-js vjs-default-skin">
    <source src="" id="iframe_field" type='video/mp4'>
</video>

......和这个JS：

function reload() {
    var videourl = $('#videourl')[0].value;
    var videoposter = $('#videoposter')[0].value;
    $('#vid3').attr('poster', videoposter);
    $('#vid3').attr('src', videourl);
    videojs("vid3", {}, function(){
        this.load();
    });
}

（需要jQuery和video.js。）

Jsbin demo

以上是否符合您的要求？我不知道＆＃34; ontype＆＃34;输入元素中的属性用于。

如何将输入内容复制到HTML5视频播放器的网页源？

2 个答案: