jsでの動画クリック、再生リストの件で

Question

お世話になります。

<video controls disablepictureinpicture controlslist="nodownload" oncontextmenu="return false;" preload=”auto”>
　　<source id="videoarea" src="">
</video>
<ul id="playlist">
    <li movieurl="https://◯◯◯.net/test1.mp4" class="active">動画1</li>
    <li movieurl="https://◯◯◯.net/test2.mp4">動画2</li>
    <li movieurl="https://◯◯◯.net/test3.mp4">動画3</li>
    <li movieurl="https://◯◯◯.net/test4.mp4">動画4</li>
</ul>

$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": ""
        })
    })

    $(function(){
  $('#playlist li').click(function(){
    $('#playlist li').removeClass('active');
    $(this).addClass('active');
  })
})
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})

上記コードにて、videoタグ内のsourceのsrc内へ、各動画liをクリックすると動画のurl自体は入るのですが、うまく再生されないのですが、
なにか改善方法はございますでしょうか？

<video id="videoarea" controls disablepictureinpicture controlslist="nodownload" oncontextmenu="return false;" poster="" src="" preload=”auto”></video>

これでありましたら、再生はされるのですが。

sourceタグ内では再生不可なのでしょうか？

よろしくお願いいたします。

追記：
ご助言いただき、sourceタグ内ではなく、videoタグ内へautoplayが入るように修正してみたのですが、改善出来ずです。
引き続き、ご助言いただければ、助かります。

Answer 1

autoplayがvideoタグではなくsourceタグに付いているような感じがします。
あと関係ないかもしれませんがpreload=”auto”が全角になっています。

Comments

[niccha]

ご回答、ありがとうございます。
たしかにページ表示時点では、autoplayはsourceタグ内にないですが、下のリストをクリックすると、sourceタグ内のsrcへ動画のURLが入ると同時に、sourceタグ内にautoplayが入ってますね。
これを修正すれば、再生されるのでしょうか？
具体的にどこを修正すればいいか、お教えただけますと助かります！！

[niccha]

videoタグ内に新たにIDを設定し、下記jsに書き換える事でsourceタグ内のautoplayを削除し、
videoタグ内にautoplayを設定出来ました。
ただ、それでも動画の再生は出来ないです。sourveタグ内のsrcにはクリックした動画のurlが入っております。

$(function() {
$("#playlist li").on("click", function() {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
})
$("#videobox").attr({
"poster": "",
"autoplay": ""
})
})

$(function(){
$('#playlist li').click(function(){
$('#playlist li').removeClass('active');
$(this).addClass('active');
})
})
$("#videobox").attr({
"poster": $("#playlist li").eq(0).attr("moviesposter")
})
})

[tabuu]

sourceに動的に読み込んだ場合はautoplayは無効になるのかもしれないですね。

videoboxがvideoタグのidとすれば以下のように再生できないでしょうか。
$("#videobox")[0].play();

[niccha]

コメント気付くのが遅くなりました。
$("#videobox")[0].play();
上記コード、jsのどこへ具体的に記載すれば、よろしかったでしょうか？？

[tabuu]

srcを変更した後です。