HTML5 + CSS 3 - Как автоматически воспроизводить видео?
Как я могу создать div, который содержит видео с автоматическим воспроизведением, как этот сайт? Могу ли я достичь этого с помощью HTML5 и CSS3?
Я проверяю это и получаю кучу кода, который не понимаю:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="517.135px" height="136.187px" viewBox="0 0 517.135 136.187" enable-background="new 0 0 517.135 136.187" xml:space="preserve"><g><path d="M85.767,53.439V0h29.971c5.827,0,10.39,4.226,10.39,9.617v14.497c0,5.39-4.563,9.615-10.39,9.615H98v19.71H85.767z M112.574,22.933c0.779,0,1.322-0.428,1.322-0.814V11.611c0-0.386-0.543-0.815-1.322-0.815H98v12.137H112.574z"></path><path d="M161.521,53.439l-4.105-11.119h-17.939l-3.934,11.119h-12.525L143.144,0h10.767l20.125,53.439H161.521z M153.605,31.753 l-5.12-15.152l-5.122,15.152H153.605z"></path><path d="M210.693,53.439l-10.771-19.71h-9.253v19.71h-12.233V0h30.825c5.828,0,10.392,4.226,10.392,9.617v14.497 c0,4.004-2.608,7.512-6.494,8.95l11.186,20.375H210.693z M206.098,22.933c0.78,0,1.323-0.428,1.323-0.814V11.611 c0-0.386-0.543-0.815-1.323-0.815h-15.429v12.137H206.098z"></path><path d="M266.348,53.439l-4.104-11.119h-17.942l-3.931,11.119h-12.529L247.973,0h10.766l20.127,53.439H266.348z M258.434,31.753 l-5.123-15.152l-5.119,15.152H258.434z"></path><path d="M293.757,53.439c-5.782,0-10.311-4.224-10.311-9.618V9.617c0-5.392,4.528-9.617,10.311-9.617h19.233 c5.829,0,10.396,4.226,10.396,9.617v8.329l-12.238,1.828v-8.163c0-0.386-0.539-0.815-1.319-0.815h-12.825 c-0.776,0-1.322,0.43-1.322,0.815v30.218c0,0.385,0.546,0.814,1.322,0.814h12.825c0.78,0,1.319-0.43,1.319-0.814v-8.623 l12.238,1.828v8.787c0,5.395-4.566,9.618-10.396,9.618H293.757z"></path><polygon points="362.97,53.439 362.97,31.581 345.615,31.581 345.615,53.439 333.38,53.439 333.38,0 345.615,0 345.615,20.784 362.97,20.784 362.97,0 375.199,0 375.199,53.439 "></polygon><path d="M395.931,53.439c-5.78,0-10.305-4.224-10.305-9.618V0h12.232v41.829c0,0.385,0.544,0.814,1.32,0.814h12.827 c0.778,0,1.32-0.43,1.32-0.814V0h12.233v43.821c0,5.395-4.567,9.618-10.39,9.618H395.931z"></path><polygon points="446.762,53.439 446.762,10.796 431.284,10.796 431.284,0 474.471,0 474.471,10.796 458.995,10.796 458.995,53.439 "></polygon><polygon points="480.62,53.439 480.62,0 517.135,0 517.135,10.796 492.85,10.796 492.85,21.093 514.998,21.093 514.998,31.888 492.85,31.888 492.85,42.644 517.135,42.644 517.135,53.439 "></polygon></g><g><polygon points="127.535,125.525 127.535,96.896 117.776,116.474 107.678,116.474 97.917,96.896 97.917,125.525 85.767,125.525 85.767,70.399 97.517,70.399 112.726,101.673 127.938,70.399 139.686,70.399 139.686,125.525 "></polygon><path d="M160.53,125.525c-5.938,0-10.592-4.334-10.592-9.863V80.259c0-5.529,4.653-9.859,10.592-9.859h20.794 c5.988,0,10.678,4.33,10.678,9.859v35.403c0,5.529-4.69,9.863-10.678,9.863H160.53z M163.892,81.387 c-0.865,0-1.447,0.486-1.447,0.938v31.274c0,0.451,0.583,0.938,1.447,0.938h14.159c0.865,0,1.446-0.486,1.446-0.938V82.325 c0-0.452-0.582-0.938-1.446-0.938H163.892z"></path><polygon points="236.782,125.525 215.885,93.46 215.885,125.525 203.733,125.525 203.733,70.399 215.404,70.399 236.301,102.603 236.301,70.399 248.451,70.399 248.451,125.525 "></polygon><polygon points="273.922,125.525 273.922,81.387 257.902,81.387 257.902,70.399 302.445,70.399 302.445,81.387 286.43,81.387 286.43,125.525 "></polygon><path d="M346.044,125.525l-11.149-20.402h-9.698v20.402h-12.504V70.399h31.829c5.885,0,10.674,4.423,10.674,9.859v15.002 c0,4.139-2.716,7.76-6.766,9.213l11.552,21.051H346.044z M341.247,94.132c0.861,0,1.446-0.48,1.446-0.936V82.325 c0-0.452-0.585-0.938-1.446-0.938h-16.051v12.746H341.247z"></path><path d="M459.04,125.525l-4.245-11.512h-18.673l-4.074,11.512h-12.79l20.76-55.125h11.042l20.764,55.125H459.04z M450.914,103.261 l-5.418-16.023l-5.419,16.023H450.914z"></path><polygon points="480.62,125.525 480.62,70.399 493.126,70.399 493.126,114.537 517.197,114.537 517.197,125.525 "></polygon><g><polygon points="371.601,125.525 371.601,70.399 409.236,70.399 409.236,81.387 384.106,81.387 384.106,92.23 407.024,92.23 407.024,103.216 384.106,103.216 384.106,114.537 409.236,114.537 409.236,125.525 "></polygon><rect x="381.077" y="63.598" width="18.682" height="2.818"></rect></g></g><g><path d="M31.597,65.801L2.566,44.852l-2.539-5.215L0,0h11.048l24.296,17.6L59.647,0h11.05l-0.029,39.637l-2.54,5.215 L39.095,65.801H31.597z M38.177,62.951l27.704-19.99l1.938-3.98L67.845,2.85h-7.272L36.049,20.605h-1.407L10.127,2.85H2.851 L2.874,38.98l1.938,3.98l27.705,19.99H38.177z"></path><polygon points="36.974,23.454 61.495,5.699 64.994,5.699 64.972,38.323 63.636,41.069 37.254,60.104 33.436,60.104 7.062,41.069 5.724,38.323 5.702,5.699 9.202,5.699 33.718,23.454 "></polygon></g><g><path d="M31.597,136.187L2.566,115.238l-2.539-5.213L0,70.387h11.048l24.296,17.597l24.303-17.597h11.05l-0.029,39.638 l-2.54,5.213l-29.034,20.949H31.597z M38.177,133.337l27.704-19.988l1.938-3.984l0.025-36.13h-7.272L36.049,90.994h-1.407 L10.127,73.234H2.851l0.023,36.13l1.938,3.984l27.705,19.988H38.177z"></path><polygon points="36.974,93.841 61.495,76.085 64.994,76.085 64.972,108.707 63.636,111.453 37.254,130.49 33.436,130.49 7.062,111.453 5.724,108.707 5.702,76.085 9.202,76.085 33.718,93.841 "></polygon></g></svg>
Нужно ли сначала конвертировать и размещать видео в другом месте?
Я пытался с тегом видео HTML5, но он не работает вообще:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Autoplay</title>
</head>
<body>
<video width="640" height="360" src="https://www.youtube.com/watch?v=e3Nl_TCQXuw" autoplay muted>
<p> Try this page in a modern browser! Or you can <a href="https://www.youtube.com/watch?v=e3Nl_TCQXuw">download the video</a> instead.</p>
</video>
</body>
</html>
Есть идеи?
3 ответа
<!DOCTYPE html>
<html>
<body>
<video width="560" height="315" preload="auto" autoplay muted>
<source src="insert you video url here" type="video">
</video>
<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>для получения дополнительной информации о video тег attributes Кликните сюда
если хотите source YouTube видео на видео тег, чем этот вопрос
Для автоматического воспроизведения видео вы можете использовать встроенный iframe, предоставленный YouTube, и это будет довольно просто:
<iframe width="640" height="360" src="https://www.youtube.com/embed/e3Nl_TCQXuw?autoplay=1" frameborder="0" allowfullscreen></iframe>
Вы можете найти больше информации о параметрах, которые вы можете передать в iframe здесь.
Но для автоматического воспроизведения видео вам нужно будет использовать JavaScript. Вот пример, похожий на ваш вопрос:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Autoplay</title>
</head>
<body>
<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'e3Nl_TCQXuw', // YouTube Video ID
width: 640, // Player width (in px)
height: 360, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0 // Hide video controls when playing
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>
</body>
</html>Могу ли я достичь этого с помощью HTML5 и CSS3?
Да можно хоть по ссылке https://www.youtube.com/watch?v=e3Nl_TCQXuw не возвращает видео, оно возвращает страницу YouTube с загруженным видео, поэтому вам нужно получить к нему доступ другим способом или загрузить его как видео и разместить в другом месте.
Вот пример, показывающий работу кода, когда источником является допустимое видео.
<video autoplay muted preload="none"
src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"
style="width: 500px;">
</video>Я проверяю это и получаю кучу кода, который не понимаю:
<svg xmlns="http://www.w3.org/2000/svg" ...</svg> Тег - это масштабируемая векторная графика.