Видео HTML 5 не воспроизводится
У меня есть простая форма, в которой пользователь может ввести имя и отправить, когда пользователь вводит имя пользователя, видео автоматически воспроизводится в iframe, когда пользователь нажимает кнопку «Отправить», я хочу открыть новую страницу, которая содержит видео, автоматически видео должен воспроизводиться, когда пользователь нажимает кнопку «Отправить».
Вот что я зашел так далеко:
Форма страницы HTML.
<!DOCTYPE html>
<html>
<head>
<title>Wideo iframe</title>
<!-- Website Font style -->
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" href = "./css/style.css">
<link rel = "stylesheet" href = "./css/form.css">
</head>
<body>
<iframe id = "videoframe" src = "videoframe.html"></iframe>
<br />
<div class = "container">
<div class = "row main">
<div class = "main-login main-center">
<h5>WYP: Formularz.</h5>
<form id = "formData" name = "contact" role = "form" method = "post" action = "thankspage.html" target = "_blank">
<div class = "form-group">
<label for = "name" class = "cols-sm-2 control-label">Imie</label>
<div class = "cols-sm-10">
<div class = "input-group">
<span class = "input-group-addon"><i class = "fa fa-user fa" aria-hidden = "true"></i></span>
<input type = "text" class = "form-control" name = "name" id = "name" placeholder = "Enter your Name" />
</div>
</div>
</div>
<input type = "submit" id = "button" value = "submit" class = "btn btn-primary btn-lg">
</form>
</div>
</div>
</div>
</body>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous"></script>
<script src = "js/form.js" type = "text/javascript"></script>
</html>
вот form.js
//form script
$(document).ready(function () {
$(window).resize(resizeIframe);
$(window).resize();
//play a video when user enter aa name
$("input#name").on("change", function () {
document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype = " + "name" + "&value = " + $("input#name").val(), "*");
});
// play a video when a user clicks submit button this is not working !!!!!!!
$("#button").on("click", function(){
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'submitSlide()'
}), "*")
})
});
function resizeIframe() {
console.info($("iframe#videoframe").width()*576/1024 );
$("iframe#videoframe").height( $("iframe#videoframe").width()*576/1024 );
}
вот videogframe.js
var autoplay = true;
var movieName1 = "./videos/videoplayback.mp4"
var movieThanks = "./videos/darasa.mp4"
function resizeFunction() {
$("#videowrapper").height($("#videowrapper").width() * 576 / 1024);
}
window.addEventListener("message", receiveMessage, false);
function receiveMessage(eventPosted) {
var values = eventPosted.data.split("&");
var event = values[0].split(" = ")[1];
var fieldtype = values[1].split(" = ")[1];
var value = values[2].split(" = ")[1];
console.info(event, fieldtype, value);
switch (event) {
case "fieldchanged":
switch (fieldtype) {
case "name":
openSlide("nameSlide", {
value: value
});
case "submit":
openSlide("submitSlide", {
value: value,
});
break;
default:
break;
}
break;
default:
console.info("Event not supported");
break;
}
}
function openSlide(slideName, params) {
switch (slideName) {
case "nameSlide":
openName(params);
break;
case "submitSlide":
openSubmit(params);
break;
}
}
var params = null;
function openName(_params) {
playVideo(movieName1);
}
function openSubmit(_params){
playVideo(movieThanks);
}
// function top play video
function playVideo(src) {
$("#playervideo").attr("src", src);
$("#playervideo")[0].muted = false;
if (autoplay == true) {
var playPromise = $("#playervideo")[0].play();
if (playPromise !== undefined) {
playPromise.then(function () {}).catch(function () {
if (autoplay == true) {
$("#video-unmute-button").addClass("show");
$("#playervideo")[0].muted = true;
var playPromise2 = $("#playervideo")[0].play();
playPromise2.then(function () {
}).catch(function () {
$("#video-start-button").addClass("show");
$("#video-start-button").on("click", function () {
$("#playervideo")[0].muted = false;
$("#playervideo")[0].play();
$("#video-start-button").removeClass("show");
});
});
console.info("pause force");
} else {
}
});
} else {}
} else {
}
}
Вот html страница кадра видео.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Wideo iframe</title>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<div id = "videowrapper">
<video id = "playervideo" controls></video>
<canvas id = "videocanvas" width = "1024" height = "576"></canvas>
<div id = "testform"><input type = "text"/></div>
</div>
</body>
<script src = "jslibs/howler.min.js"></script>
<script src = "https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src = "js/videoframe.js" type = "text/javascript"></script>
</html>
Я использую сообщения для связи.
Все работает, как ожидалось, кроме тех случаев, когда я нажимаю «Отправить», это просто открывает новую страницу без воспроизведения видео.
UPDATE: please any one does not understand what I want , down
Here is repo for what I am trying to do : Video frame
just clone the repo run the page named formpage.html, start filling the form u will see automatically video plays, but when u click the submit button just opnes the page but the video is not playing : Test it your self
ОБНОВЛЕНИЕ: чтобы быть более конкретным, я хочу использовать подобное сообщение, добавив список событий.
// play a video after the user click submit button
$("input#button").on("click", function () {
document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype = " + "submit" + "&value = " + $("input#button").val(), "*");
});
Почему мое видео не воспроизводится? Что я делаю неправильно? благодаря.
hii nik Я попробую сейчас, вы можете попробовать себя, есть ссылка на репо над простой HTML-страницей javascript, просто клонируйте ее и запустите formpage.html, и вы все увидите
Nik, если вы установите для mmuted значение true, когда вы вводите имя пользователя, воспроизводите видео без звука, так что это не решает проблему?
Вы можете установить демо? Таким образом, мы можем помочь вам отладить его (создать скрипт или plunkr)
Вы не получите автоматического воспроизведения видео без звука. Эту политику производителей браузеров не могут понять многие наши клиенты, и многие пользователи очень благодарны за нее.
@Red, ладно, дай мне несколько минут, я создаю это
@red plunker не позволяет мне сохранять файлы, пожалуйста, просто клонируйте это репо здесь репо
: Я пытаюсь решить эту проблему, блин, кто-нибудь?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема на самом деле очень проста, она не работает, потому что вы помещаете тег видео внутри тега iframe в вашем thankspage.html, удаляете тег iframe и добавляете флаг отключения звука, и он должен работать.
Так что измени это
<iframe id = "videoframe" src = "videoframe.html">
<video width = "320" height = "240" controls autoplay>
<source src = "./video/janusz.mp4" type = "video/mp4">
</video>
</iframe>
к этому :
<video width = "320" height = "240" controls autoplay muted>
<source src = "./videos/janusz.mp4" type = "video/mp4">
</video>
Это, конечно, нарушит ваш CSS, но вы можете легко изменить его размер впоследствии, поместив тег видео внутри div и манипулируя этим div.
Как вы можете видеть здесь: https://jsfiddle.net/8xfq9urh/
Спасибо, ислам, я хочу воспроизводить видео внутри iframe, потому что они будут использоваться в другом домене, удалите этот тег видео и добавьте список событий для публикации сообщения, проверьте другое видео, как я это сделал, я хочу то же самое, но, к сожалению, я не знаю, как с кнопкой отправки
Я пробовал что-то вроде этого: `$ (" input # button "). On (" onlick ", function () {document.getElementById ('videoframe'). ContentWindow.postMess age (" event "+" button "+" & value = "+ $ (" input # button "). val ()," * ");});`
@ user9964622, мой ответ отвечает на ваш текущий вопрос, вы не указали ничего другого в своем исходном сообщении. Не могли бы вы задать еще один вопрос по любым другим вопросам, которые могут у вас возникнуть?
Вы пытались воспроизвести видео с атрибутом отключения звука, установленным в значение true?