Change video quality using jquery

问题

I have a simple video player now I would like to change the quality of the video as on youtube, after changing the video source it should start exactly like the current time, IT SHOULD NOT START FROM 0 (IPHONE PROBLEM).

Here is a live demo. Live demo

Here I what I have so far

HTML

<div id="video-container">
    <video id="videoplayer" width="750" height="421" webkit-playsinline playsinline controls muted autoplay>
        <source src="https://www.interactive-video.videomill.pl/editorv1/molecular_player/videos/molecular.mp4" />
    </video>
</div>

<select class="qualitypick" autocomplete="off"> </select>

Now on android, chrome, edge etc works fine as expected but when I open the demo on iPhone safari, I play the video after few seconds I change to low quality, but the video starts from the beginning instead of starting at the current time.

What is wrong with the code above? any help or suggestions will be appreciated

回答1:

Try This:

var formats = {
    "HD": "https://www.interactive-video.videomill.pl/editorv1/molecular_player/videos/molecular.mp4",
    "720p": "https://www.interactive-video.videomill.pl/editorv1/molecular_player/quality/molecular_720_converted.mp4",
    "360p": "https://www.interactive-video.videomill.pl/editorv1/molecular_player/quality/molecular_360_converted.mp4",
$.cloudinary.videoTag("watchme", {controls: true, secure: true}).transformation()
.overlay("text:arial_60:watchme").gravity("north").y(20)
.toHtml()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video poster="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.jpg" controls>
<source src="https://www.interactive-video.videomill.pl/editorv1/molecular_player/videos/molecular.mp4" type="video/webm">
<source src="https://www.interactive-video.videomill.pl/editorv1/molecular_player/videos/molecular.mp4" type="video/mp4">
<source src="https://www.interactive-video.videomill.pl/editorv1/molecular_player/videos/molecular.mp4">
</video>

来源：https://stackoverflow.com/questions/61663311/change-video-quality-using-jquery

标签

javascript

html

jquery

html5-video