Tag: video

获取html 5video以全屏模式自动打开: 我成功地使用HTML 5video标签和jQuery以全屏模式打开video以响应事件（点击，按键）。如何在页面加载时全屏打开video而不是onclick？任何帮助，将不胜感激。非常感谢！我的HTML：我的JavaScript： $(document).ready(function(){ $(‘#video1’).bind(“playing”, function(){ var elem = document.getElementById(“video1”); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } }); $(‘#video1’).bind(“ended”, function(){ $(“#video_container”).hide(); }); });

在提交表单之前显示video: 我想允许用户在我的网站上传video，我想在提交表单之前显示video的预览。我用图像做了，但video的脚本不起作用 HTML： Videos 预览的div： Your browser does not support HTML5 videos PHP： $(“#upload-vid1”).on(“change”, function(){ var this_ = $(this).parent(); var dataid = $(this).attr(‘data-id’); var files = !!this.files ? this.files : []; if (!files.length || !window.FileReader) return; if (/^video/.test( files[0].type)){ var reader = new FileReader(); reader.readAsDataURL(files[0]); reader.onloadend = function(){ var video = document.getElementById(‘vid-src’); video.src = this.result; […]

什么是HTML5video的最佳方法？: 我正在这个网站（ http://martindue.dk/esoft/ ）上工作，我希望在第一个区域内有一个电影播放器。所以我认为我需要从头开始构建一些东西，因为我希望video播放器没有控件，而且“播放按钮”应该出现在video的顶部，当它尚未启动时，点击，按钮应该消失，video开始播放。没有太多代码可以吗？在Javascript（jQuery）方面，我不是野兽。

当mp4是唯一的源时，自定义HTML5video控件无法正常工作: 问题：我只有一个video源（mp4），因为我正在尝试为tumblrvideo添加自定义控件。如果只有mp4作为源video.duration返回为NaN 。作为使用3个源（mp4 / webm / ogg）的测试然后它可以工作，所以只能从wemb或ogg返回video.duration。 JSFIDDLE 1只有一个mp4作为源（所以不工作）。 JSFIDDLE 2有3个源文件正在工作。 HTML Play Mute Full-Screen 0 0 JS： // Video var video = document.getElementById(“video”); // Buttons var playButton = document.getElementById(“play-pause”); var muteButton = document.getElementById(“mute”); var fullScreenButton = document.getElementById(“full-screen”); // Sliders var seekBar = document.getElementById(“seek-bar”); var volumeBar = document.getElementById(“volume-bar”); // Event listener for the play/pause […]

滑动更改时，滑动滑块暂停youtubevideo: 我使用Jquery Slick Slider创建了一个图像滑块，它也有youtubevideo剪辑。当页面加载youtubevideo设置为滑块的第一张幻灯片时，它是自动播放并开始播放。我想，当我将滑块更改为下一张幻灯片时，youtubevideo停止播放。我看看其他stackoverflow的答案，但找不到任何东西。我试过这个 – 这是我的div结构 – 我用JS – $(“#mainSlider”).slick({ dots: true, autoplay: false, autoplaySpeed: 7000, speed: 500, pauseOnHover: true, responsive: [ { breakpoint: 1025, settings: { arrows: true, dots: false } } ] }) .on(‘afterChange’, function( e, slick, currentSlide ) { $(‘.bumper’).css(‘display’, ‘block’); playpausevideo($currentSlide.eq(e).data(‘youtubeplayer’), ‘pause’) }); Youtube JS – function onYouTubeIframeAPIReady(){ […]

使用jQuery将播放/暂停/结束function绑定到HTML5video: 我试图使用jQuery绑定play / pause和ended事件，但有一个问题：当我右键单击video并选择播放或暂停时，图标会正确更改。当我单击播放按钮时，它会更改为暂停，但如果我单击暂停按钮继续播放video，则它不会更改为再次播放。谁能告诉我哪里出错了？这是我的代码： var PlayVideo = function () { if ($(‘#video’).attr(‘paused’) == false) { $(‘#video’).get(0).pause(); } else { $(‘#video’).get(0).play(); } }; $(‘#playbtn’).click(PlayVideo); $(‘#video’).click(PlayVideo); $(‘#video’).bind(‘play’, function () { $(‘.playbtn’).addClass(‘pausebtn’); }); $(‘#video’).bind(‘pause’, function () { $(‘.playbtn’).removeClass(‘pausebtn’); }); $(‘#video’).bind(‘ended’, function () { $(‘.playbtn’).removeClass(‘pausebtn’); }); CSS： .playbtn { display: block; width: 32px; height: 32px; margin-left: […]

使用jQuery创建一个新的html5video对象: 如何使用jQuery创建video元素，并将其属性（如control）添加到true（），添加和删除video源（ <source src='http://somesite.com/somevideo.mp4' ），等等？我想在加载之前设置它的所有选项（如自动播放，真或假等）我尝试了这个没有成功（它适用于图像，但不适用于video）： $( document ).ready(function() { var photo = $(”, { id: ‘photo’, src: ‘http://lorempixel.com/400/200/city/’, alt: ” }); photo.appendTo($(‘#gallery’)); var video = document.createElement(‘video’); alert( video.toSource() ); //For testing video.id = ‘video’; video.source.src = ‘http://video-js.zencoder.com/oceans-clip.mp4’; video.type = ‘video/mp4’; video.control = true; video.appendTo($(‘#gallery’)); }); jsFiddle： https ：//jsfiddle.net/9cnaz3ju/1/

hover时自动暂停或播放HTML5video: 我正在尝试编写一个包含三个按钮的页面的一部分。每个按钮都应淡出当前video并开始播放与该按钮相关的video。该video应播放，直到您点击另一个按钮，此时它会淡出并暂停，新video会淡入并开始播放。我有fadeIn / fadeOut到位，但我有一些问题挂钩暂停和播放function。有任何想法吗？这是我到目前为止的jQuery： $(‘.hover-text div[class^=”slide”]’).hover( function () { if (!$(this).hasClass(‘current’)) { $(‘.slides div’).fadeOut(); }; var class = $(this).attr(‘class’); $(‘.slides div.’ + class).fadeIn(‘slow’); $(‘div[class^=”slide”]’).removeClass(‘current’); $(this).addClass(‘current’); }, function () { } ); 我找到了本教程，但我不确定如何将该代码合并到我的中。

使用jquery检查HTML5video是否正在播放: 我编写了一个小的jquery代码来覆盖HTML 5播放function。但是，我无法检查video是否正在播放。这是我的jquery代码 $(“video”).click(function() { var video = $(“#myvideo”).get(0); video.play(); $(“.play”).css(“display”, “none”); return false; }); $(“#myvideo”).bind(“pause ended”, function() { $(“.play”).css(“display”, “block”); }); 只要给我一些简单的提示，在video暂停时暂停video，并使用class=”pause”显示div（我有CSS）。

为HTML5videowindow.onscroll设置currentTime是滞后的: 我正在尝试在窗口滚动事件上为html5video设置currentTime。基本上，我们的想法是在滚动页面时在video时间轴中向前或向后移动。这个例子在这里做得很好没有问题： http ： //codepen.io/ollieRogers/pen/lfeLc 这是代码： // select video element var vid = document.getElementById(‘v0’); //var vid = $(‘#v0’)[0]; // jquery option // pause video on load vid.pause(); // alternative & optimized implementation thanks to http://codepen.io/daveroma/ window.onscroll = function(){ vid.currentTime = window.pageYOffset/400; }; #set-height display block height 13500px #v0 position fixed top 0 left 0 […]