Tôi đã sử dụng một iframe video trong trang web của tôi. Đây là mã html của tôichơi iframe video trên bấm vào một liên kết javascript
<iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
<a href="#" id="playvideo">Play video</a>
Tôi cần phải play video onclick liên kết video phát. Làm thế nào tôi có thể làm điều đó?
này hoạt động, nó gắn autoplay=1 để url gây ra video để bắt đầu chơi.
phụ lục: Nếu nguồn video của bạn không đã có một chuỗi truy vấn sau đó nó sẽ là khôn ngoan để thêm một ? thay vì một &, như là đôi khi các trường hợp. Điều này có thể được thực hiện bằng cách tìm kiếm sự tồn tại của nó.
<iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
<a href="#" id="playvideo">Play video</a>
<script>
//use .one to ensure this only happens once
$("#playvideo").one(function(){
//as noted in addendum, check for querystring exitence
var symbol = $("#video1")[0].src.indexOf("?") > -1 ? "&" : "?";
//modify source to autoplay and start video
$("#video1")[0].src += symbol + "autoplay=1";
});
</script>
Tuy nhiên, hầu hết mọi người vốn đã hiểu rằng nếu họ muốn một đoạn video để chơi, họ sẽ chỉ cần nhấp vào nó và tôi sẽ đề nghị chỉ rời khỏi đó với họ hoặc bắt đầu video đầu với autoplay.
Cũng cần phải đề cập đến autoplay mà không hoạt động trên các thiết bị di động (được hỗ trợ bởi Android hoặc iOS)
ở đây là liên kết để dụ http://jsfiddle.net/WYwv2/5/
Check-out này
<!DOCTYPE html>
<html>
<body>
<a href="#" id="playvideo" onclick="playme()">Play video</a>
<iframe id="video1" width="520" height="360" frameborder="0" ></iframe>
<script>
function playme() {
document.getElementById("video1").src = 'http://www.w3schools.com/tags/mov_bbb.mp4';
}
</script>
</body>
</html>
Chúng tôi thiết lập nguồn video động.
Nó làm việc cho tôi vì vậy tôi cũng bỏ phiếu. –
kể từ khi câu trả lời đầu tiên là đã 3 tuổi, hãy để tôi chỉ cho API Youtube Player. Với điều đó, bạn có thể điều khiển từ xa trình phát được nhúng của mình. Xem https://developers.google.com/youtube/iframe_api_reference?hl=en
Với một sự điều chỉnh nhỏ, bạn có thể bắt đầu video thông qua liên kết và không có tải lại toàn bộ iframe:
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<!-- The Play-Link will appear in that div after the video was loaded -->
<div id="play"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
//event.target.playVideo();
document.getElementById('play').innerHTML = '<a href="#" onclick="play();">Play Video</a>';
}
function play(){
player.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
Không hoạt động trên Chrome. Bạn nhận được lỗi này: 'nguồn gốc Untrusted: chrome-extension: // boadgeojelhgndaghljhdicfkmllpafd' – AjaxLeung
tôi một cách chính xác thiết lập cuối cùng src - autoplay = 1
<iframe id="video1" width="450" height="280" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
<a href="#" id="playvideo">Play button</a>
<script>
$("#playvideo").click(function(){
$("#video1")[0].src += "?autoplay=1";
});
</script>
Nó hoạt động tốt nếu tôi sử dụng video ống của bạn. Nếu tôi sử dụng bất kỳ khác như http://test.com/SF7Hg nó không hoạt động. –
Đương nhiên các mã trên sẽ không hoạt động trên một đoạn video đó không phải là từ Youtube ... đó là mã từ API Youtube. NẾU bạn muốn sử dụng một video từ một nơi khác, bạn sẽ phải nhận được một API từ chúng (nếu có). Trong một số trường hợp, chẳng hạn như khi URL trực tiếp vào nguồn video được công khai, bạn có thể nhúng URL đó vào trang web của mình làm nguồn của phần tử video HTML5 và sử dụng API tích hợp sẵn của trình duyệt để phát lại video HTML5. – jlmcdonald
Cảm ơn bạn đã trả lời –