html5 jquery 对话框中的视频 -- javascript 不会在第一次点击时播放

Question

大家好：我有一个相对简单的页面，在 JQuery 对话框 div 中有一个 HTML5 视频。我正在尝试使用一个按钮来同时打开对话框并开始播放视频，但我尝试过的所有操作都无法播放视频，直到我再次单击该按钮。

我希望视频在打开对话框后立即开始播放，而无需再单击 "play" 按钮。

    <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" link 时，模式打开并且视频位于起点，但不播放。就好像 play() 命令正在暂停它。

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

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

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

但这也不起作用...我想是因为视频在首次加载时不是 "paused"？

我不确定对话框本身是否干扰了 "play" 命令？

Answer 1

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

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

Answer 2

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

如果您不希望对话框自动出现，请以务实的方式打开它。点击按钮时说。

 $(document).on('pageinit',function(){

   $(button).on('click',function(){
   $.mobile.changePage('#yourdialogid', {
                transition: 'pop',
                changeHash: false,
                role: 'dialog'
            });
         });

 });

html5 jquery 对话框中的视频 -- javascript 不会在第一次点击时播放

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

javascript

jquery

html5-video