[英]How to play video from youku using javascript?
如何使用javascript播放优酷视频?
我试图这样做但不起作用,我该怎么做?
<iframe id="test" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA==" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 50%; height: 50%;"></iframe>
<div style=" position: fixed; top: 56%; " onclick="play_fn()">Play</div>
<script>
function play_fn(){
var test = document.getElementById('test');
test.play();
}
</script>
play()
是在<video>
和<audio>
元素上找到的方法。 <iframe>
只是在页面中嵌入URL的一种方法。 它不提供用于播放媒体的API。
除非youku提供了您可以访问的API(我无法通过快速搜索找到它),否则无法触发页面中的回放。
浏览器强加的标准跨源安全限制阻止您使用JavaScript操纵嵌入式页面。
检查我的解决方案。 您可以根据自己的情况确定样式,我使用span
作为视频上方的覆盖,当您单击它时,该span
会消失并播放视频。
const videoSection = document.querySelector('.video'); if(videoSection) { const playBtn = document.querySelector('.play-btn'); playBtn.addEventListener('click', playVideo); } function playVideo() { const iframeHolder = document.querySelector('.iframe-holder'); const iframeEl = document.querySelector('.iframe-holder iframe'); const playStr = '?autoplay=true'; let baseUrl = iframeEl.getAttribute('src'); iframeHolder.classList.add('play'); iframeEl.setAttribute('src', `${baseUrl}${playStr}`); iframeEl.setAttribute('allow', 'autoplay'); }
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <title>Title</title> </head> <body> <div class="video"> <span class='play-btn'></span> <iframe allowfullscreen="" frameborder="0" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe> </div> </body> </html>
const videoSection = document.querySelector('.video');
if(videoSection) {
const playBtn = document.querySelector('.play-btn');
playBtn.addEventListener('click', playVideo);
}
function playVideo() {
const iframeHolder = document.querySelector('.iframe-holder');
const iframeEl = document.querySelector('.iframe-holder iframe');
const playStr = '?autoplay=true';
let baseUrl = iframeEl.getAttribute('src');
iframeHolder.classList.add('play');
iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
iframeEl.setAttribute('allow', 'autoplay');
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Title</title>
</head>
<body>
<div class="video">
<span class='play-btn'></span>
<iframe allowfullscreen="" frameborder="0" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
</div>
</body>
</html>
参考此代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#overlay {
position: absolute;
top: 100px;
color: #FFF;
text-align: center;
font-size: 20px;
background-color: rgba(221, 221, 221, 0.3);
width: 640px;
padding: 10px 0;
z-index: 2147483647;
}
#v {
z-index: 1;
}
</style>
<title>Overlay HTML over video player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload=function() {
var video = document.getElementById('v');
video.play();
}//]]>
</script>
</head>
<body>
<video id="v" controls="">
<source id="webm" src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay" style='display: none;'>This is HTML overlay on top of the video! </div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.