Html5视频在jquery对话框- javascript won'

html5 video in jquery dialog-- javascript won't play on first click

本文关键字：won javascript 视频 jquery 对话框 Html5      更新时间：2023-09-26

嗨，我有一个相对简单的网页HTML5视频在一个JQuery对话框div。我试图使用一个按钮，同时打开对话框，并开始播放视频，但我所尝试的一切不会播放视频，直到我点击了第二次按钮。

我希望视频在对话框一打开就开始播放，而不必再点击第二个"播放"按钮。

    <head>
        <script type="text/javascript">
        $(function () {
                $("#vid").dialog({
                    autoOpen: false, show: {
                        effect: "blind",
                        duration: 1000
                    }, modal: false, height: 480, width: 640, dialogClass: "no-close"
                });
                $("#lnkVid").click(function () {
                    $("#vid").dialog("open");
                    startPlay();
                });
                function startPlay() {
                    var vid = document.getElementById('introVid');
                    if (vid.readyState===4) {
                        vid.play();
                    } else {
                        alert("not ready");
                    }                    
                }
        });
    </script>
</head>
<body>
<a href="#" id="lnkVid">Video</a>
            <div id="vid" >
                    <video width="640" height="480" id="introVid" controls>
        <source src="myvid.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
    </video>
            </div>
</body>

当我点击"linkVid"链接时，模态打开，视频处于起始点，但不播放。这几乎就像play()命令正在暂停它一样。

如果我再次点击同一链接，视频将会播放。

我试过使用play()和settimeout的组合来延迟播放命令，也试过使用三元

vid.paused() ? vid.play() : vid.pause();

但这也不起作用…我猜是因为视频第一次加载时没有"暂停"?

我不确定对话框本身是否干扰了"播放"命令?

你可以在加载视频之前确保对话框已经完成，因为它可能没有处于就绪状态。

 $("#vid").dialog({
         autoOpen: false, 
         show: {
                        effect: "blind",
                        duration: 1000,
                        complete: function() {
                              startPlay() 
                        }
        },
        modal: false,
        height: 480, 
        width: 640, 
       dialogClass: "no-close"
 });

将autoplay="autoplay"添加到视频标签中，设置对话框的autoOpen: true。

如果您不希望对话框自动出现，那么就实用地打开它。点击按钮。

 $(document).on('pageinit',function(){
   $(button).on('click',function(){
   $.mobile.changePage('#yourdialogid', {
                transition: 'pop',
                changeHash: false,
                role: 'dialog'
            });
         });
 });
相关文章：